个人中心
gpt4 book ai didi

javascript - CSS/JS 转换 :translate3d and scrolling - smooth on Android, 在 iPhone 上没有动量

转载 作者：太空宇宙 更新时间：2023-11-03 18:29:16 25 4
gpt4 key购买 nike

我目前有一个移动网站元素，我在其中创建面板，以便一次可以查看一个面板，当用户向左或向右滑动时，面板会滑出屏幕并滑入一个新面板。一切正常在 Android 上很好，甚至在 iPhone 上也是可以接受的。

然而，在 iPhone 上滚动似乎缺乏动力。换句话说，当向上/向下“轻拂”面板时，它在 Android 上 native 滚动，但在 iPhone 上它似乎很快失去动力。我想找到一个简单的 CSS 或组合 CSS/JS 解决方案，如果可能，不包括额外的库。

网站的基本结构如下:

<html>
    <head>Head stuff here</head>
    <body>
        <div class="container">
            <div class="headbox">Fixed position menu here</div>
            <div id="pages">
                <div class="page">Page panel here</div>
                <div class="page">Page panel here</div>
                <div class="page">Page panel here</div>
            </div>
            <div class="bottommenu">Fixed position bottom menu here</div>
        </div>
    </body>
</html>

这是基本的 CSS:

body {
    width:100%;
    overflow-x:hidden;
    font-size:17px;
    border-collapse:collapse;
}
.container {
    width:100%;
    height:100%;
    overflow-x:hidden;
overflow-y:scroll;
    position:relative;
    /*-webkit-perspective:1000;
-webkit-backface-visibility:hidden;*/
}
.headbox {
font-size:17px;
    height:2.3529em;
    width:100%;
    top:0;
    position:fixed;
    text-align:center;
    color:#fff;
    z-index:1;
}
#pages {
    width:100%;
    height:100%;
    white-space:nowrap;
    font-size:0;
    -webkit-backface-visibility:hidden;
-webkit-transform-style:preserve-3d;
    position:relative;
    -webkit-transform:translate3d(-100%,0,0);
    -moz-transform:translate3d(-100%,0,0);
    -ms-transform:translate3d(-100%,0,0);
    -o-transform:translate3d(-100%,0,0);
    transform:translate3d(-100%,0,0);
}
.page {
    width:100%;
    height:100%;
    display:inline-block;
    vertical-align:top;
position:relative;
white-space:normal;
    background:#fff;
font-size:17px;
}
.bottommenu {
    position:fixed;
bottom:0;
    left:0;
    width:100%;
    height:.2em;
    transition:height 400ms;
    -webkit-transition:height 400ms;
    -moz-transition:height 400ms;
    -ms-transition:height 400ms;
    -o-transition:height 400ms;
    z-index:1;
}

最后，滚动的监听器，它不应该干扰 CSS 或重绘的能力，但也许我遗漏了一些东西:

var that = this;
$(document).scroll(function(){
if (!that.direction && !that.loading) {
    that.direction = 'vertical';
    that.moving = true;
    if (that.scrolling) { clearTimeout(that.scrolling); }
    that.scrolling = setTimeout(function() {
    that.direction = false;
    that.sliding = 0;
    that._getMore();
    that.moving = false;
    },500);
}
});

有什么想法吗？我已经尝试了 -webkit-overflow-scrolling:touch;、overflow-y:scroll; 和其他可能的黑客/修复/支持语法的多种变体，但没有似乎有帮助。我需要内容在 body 标签内滚动，以便在 iPhone 上屏幕在滚动时自行调整大小，否则我会使用可滚动的 div。这不是一个选项。

最佳答案

我猜想问题是在容器内丢失了带有 position: relative; 的原生 flex 滚动；溢出:隐藏。

为 .container 尝试 -webkit-overflow-scrolling: touch;。

关于javascript - CSS/JS 转换 :translate3d and scrolling - smooth on Android, 在 iPhone 上没有动量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20199521/

25 4 0
文章推荐： ruby-on-rails - 数据库帮助尝试通过用户从组中获取函数
文章推荐： c# - 适用于所有数据类型的动态 TryParse
文章推荐： ruby - 使用/usr/local 在 OS X Leopard 上安装 Ruby 1.9 - RVM 问题
文章推荐： python - Django 中通过固定装置加载的数据的字符串表示
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com