32

我希望我的网页只能垂直滚动。所以我设置overflow-x:hidden;了我的.page-wrapper. My.page-wrapper将两个绝对定位的图层叠加在一起。当点击一个按钮时，顶层会滑到一边（如前所述position:absolute;），并使网站实际上比 100% 视口宽度更宽 - 所以它可以水平滚动。

为了防止我设置overflow-x:hidden为我的水平滚动.page-wrapper。

如果我这样做，我的正常内容的垂直滚动确实是错误的并且不能正常工作。

任何想法如何解决这个问题？

更新

-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');
    }
}
4

5 回答 5

57

尝试将其应用于每个元素：

* {
  -webkit-overflow-scrolling: touch;
}
于 2014-06-29T13:41:50.437 回答
34

您可以尝试设置width:100%on.page-wrapper并将其设置为overflow:hiddenand position:relative。这可能会阻止水平滚动。

2012 年 10 月 12 日更新

感谢您的代码示例。它确实帮助我更清楚地了解了您的意图和滚动问题。看起来您需要-webkit-overflow-scrolling。添加-webkit-overflow-scrolling: touch;到page-wrapper. 这是应用了该规则的 [更新的测试页面]。您可以在我下面的评论中与测试页面进行比较，以查看差异。

于 2012-10-11T19:36:07.853 回答
1

这为我完成了工作，因此在任何页面上都不是问题：

html {
  -webkit-overflow-scrolling: touch;
}
于 2018-02-08T16:14:36.553 回答
0

所以我在 Bootstrap 4.5 模板上遇到了这个问题：每当我添加 'overflow-x:hidden;' 到 .page-wrapper，iPhone 上的滚动不再流畅，而是断断续续。

但是当我删除 'overflow-x:hidden;' 从 .page-wrapper 开始，在 iPad 上，用户可以水平移动页面，这是不希望的。

Tim 的解决方案是一个很好的方向，对我来说最小的解决方案是在我的 CSS 文件中添加这两个部分：

在 CSS 的顶部：

html, body {width:100%; height:100%;}

在 CSS 中：

.page-wrapper { 
/** overflow-x: hidden; GIVES ISSUES WITH IPHONE!!! **/

    width:100%; 
    height:100%;
    
    position:relative; 
    overflow-x:hidden; 
    -webkit-overflow-scrolling:touch;
}

不要忘记放入 index.html：

<META name='viewport' content='width=device-width, initial-scale=1.0, shrink-to-fit=no'>
于 2020-12-11T02:52:09.293 回答
-2

TLDR；适用transform: translate3d(0px,0px,0px)于元素和包装器。

在我的例子中，一个绝对或固定位置的元素通过较小的 z-index 隐藏在主页后面。结果是，当包装器移开以使元素陶醉，然后移回时，在 iOS 上，尝试滚动该元素所在的位置时会出现延迟。我可以滚动，但我必须按住大约一秒钟。

这里描述的解决方案对我有用： https ://css-tricks.com/forums/topic/mobile-safari-iphone-issue-with-position-fixed-content-running-over-the-top/

基本上，元素和元素的包装器都需要transform: translate3d(0px,0px,0px)应用样式，然后滚动顺利进行。对我来说，如果不将它应用于元素和包装器，修复就不起作用。

于 2016-10-07T19:57:47.413 回答