我目前有一个移动网站元素，我在其中创建面板，以便一次可以查看一个面板，当用户向左或向右滑动时，面板会滑出屏幕并滑入一个新面板。一切正常在 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/