CSS iOS溢出-x（或绝对位置）使滚动断断续续？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12845892/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iOS overflow-x (or position absolute) makes scrolling choppy?
提问by matt
I want my webpage to be only scrollable vertically. So I've set overflow-x:hidden;to my .page-wrapper. My .page-wrapperholds two absolute positioned layers on top of each other. When clicking a button the top layer is sliding to the side (as mentioned position:absolute;) and makes the website actually wider than the 100% viewport witdh - so it would be scrollable horizontally.
我希望我的网页只能垂直滚动。所以我已经设置overflow-x:hidden;为我的.page-wrapper. 我的.page-wrapper两个绝对定位层相互叠加。单击按钮时，顶层会向一侧滑动（如上所述position:absolute;）并使网站实际上比 100% 视口更宽 - 因此它可以水平滚动。
To prevent the horizontal scrolling I've set overflow-x:hiddento my .page-wrapper.
为了防止横向滚动我设置overflow-x:hidden我的.page-wrapper。
If I do that, the vertical scrolling of my normal content is really buggy and doesn't work correctly.
如果我这样做，我的正常内容的垂直滚动真的有问题并且无法正常工作。
Any ideas how to fix that?
任何想法如何解决这个问题？
UPDATE
更新
-webkit-overflow-scrolling: touch;seems to work fine as long no javascript is changing any heights. See the following example. What I'm doing here is updating the height of the body to the contents-height of the second layer - so there is no empty scrolling space once the upper layer is slid to the left. When sliding the upper layer back I remove the attribte style(which sets the height) from the body. After doing that the scroll is choppy again.
-webkit-overflow-scrolling: touch;只要没有 javascript 改变任何高度，似乎就可以正常工作。请参阅以下示例。我在这里做的是将主体的高度更新为第二层的内容高度 - 因此一旦上层滑动到左侧，就没有空的滚动空间。当将上层向后滑动时，我style从主体中删除了属性（设置高度）。这样做之后，卷轴又断断续续了。
function showInfos(show) {
if ( show ) {
$('#videos').addClass('slid');
$('body').height($('#infos > .content').height());
$('#page-wrap').addClass('no-overflow');
} else if ( !show ) {
$('#videos').removeClass('slid');
$('#page-wrap').removeClass('no-overflow');
$('body').removeAttr('style');
}
}
回答by Ahmad Mushtaq
Try applying it to every element:
尝试将其应用于每个元素：
* {
-webkit-overflow-scrolling: touch;
}
回答by Tim McElwee
You could try setting width:100%on .page-wrapperand set that to overflow:hiddenand position:relative. That might prevent the horizontal scroll.
您可以尝试设置width:100%on.page-wrapper并将其设置为overflow:hiddenand position:relative。这可能会阻止水平滚动。
Updated 10/12/2012
2012 年 10 月 12 日更新
Thanks for the code example. It really helped me see your intent and the issue with scrolling more clearly. It looks like you need -webkit-overflow-scrolling. Add -webkit-overflow-scrolling: touch;to page-wrapper. Here's an [updated test page] with that rule applied. You can compare with test page in my comment below to see the difference.
感谢您的代码示例。它确实帮助我更清楚地了解您的意图和滚动问题。看起来您需要-webkit-overflow-scrolling。添加-webkit-overflow-scrolling: touch;到page-wrapper. 这是应用了该规则的 [更新的测试页]。您可以在下面的评论中与测试页面进行比较以查看差异。
回答by chdonncha
This done the job for me so that it's not a problem on any page:
这为我完成了工作，因此它在任何页面上都不是问题：
html {
-webkit-overflow-scrolling: touch;
}
回答by Julian K
TLDR; apply transform: translate3d(0px,0px,0px)to the element and the wrapper.
TLDR；适用transform: translate3d(0px,0px,0px)于元素和包装器。
In my case, an absolute or fixed position element was hidden behind the main page by having a smaller z-index. The result is that when the wrapper was moved out of the way to revel the element, and then moved back, on iOS there was a delay when trying to scroll over where that element was. I couldscroll, but I had to hold down for about a second.
就我而言，绝对或固定位置元素通过较小的 z-index 隐藏在主页后面。结果是，当包装器移开以显示元素，然后移回时，在 iOS 上尝试滚动该元素所在的位置时会出现延迟。我可以滚动，但我不得不按住大约一秒钟。
The solution described here worked for me: https://css-tricks.com/forums/topic/mobile-safari-iphone-issue-with-position-fixed-content-running-over-the-top/
这里描述的解决方案对我有用：https: //css-tricks.com/forums/topic/mobile-safari-iphone-issue-with-position-fixed-content-running-over-the-top/
Basically, both the element and the element's wrapper need to have the style transform: translate3d(0px,0px,0px)applied, then the scrolling went smoothly. For me, without applying it to both the element and the wrapper, the fix didn't work.
基本上，元素和元素的包装器都需要transform: translate3d(0px,0px,0px)应用样式，然后滚动才能顺利进行。对我来说，如果没有将它应用于元素和包装器，修复程序不起作用。
