CSS / JS 转换：translate3d 和滚动 - 在 Android 上流畅，在 iPhone 上没有动力答案

【问题标题】：CSS / JS transform:translate3d and scrolling - smooth on Android, no momentum on iPhoneCSS / JS 转换：translate3d 和滚动 - 在 Android 上流畅，在 iPhone 上没有动力
【发布时间】：2013-12-10 13:26:05
【问题描述】：

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

但是，在 iPhone 上滚动似乎缺乏动力。换句话说，当向上/向下“轻弹”面板时，它会在 Android 上原生滚动，但在 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; 和其他可能的 hacks/fixes/supported syntax 的多种变体，但没有似乎有帮助。我需要在 body 标记内滚动内容，以便在 iPhone 上屏幕在滚动时自行调整大小，否则我会使用可滚动的 div。这不是一个选项。

【问题讨论】：

标签： javascript android html ios css

【解决方案1】：

我猜想position: relative; overflow: hidden 的容器内本机弹性滚动丢失的问题。

试试-webkit-overflow-scrolling: touch; 换成.container。

【讨论】：