logo标签列表

iOS的Safari浏览器：在position: fixed;元素内滚动不起作用

htmlcssiosscrollmobile-safari
9
在一个 position: fixed; 元素中，如果你试图在触摸开始时以错误的方向进行滚动，滚动元素将会“锁定”。
例如： 触摸屏幕并向下拖动，然后向上拖动。元素不会滚动。如果你放开手，等待几秒钟，然后尝试向上拖动它，它就会滚动。
http://12me21.github.io/scroll-test.html 

body {
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
}
#scroll-container {
   overflow-y: scroll;
   height: 100%;
}
#scroller {
   height: 200vh;
   font-size: 50px;
}
<body>
   <div id=scroll-container>
      <div id=scroller>Test<br>more text</div>
   </div>
</body>

这个回答：https://dev59.com/X1kS5IYBdhLWcg3wj3fP#51733026 看起来与我遇到的问题相同，但修复方法不再有效。它似乎发生在所有fixed元素内，并且不再由-webkit-overflow-scrolling: touch;引起。
现在是否有任何修复方法？还是我需要完全避免使用position: fixed;？
可能是重复的/与https://dev59.com/PFgR5IYBdhLWcg3wM7Hh?rq=1相关的内容。 - 12Me21
3个回答
8

在 <html> 或者 <body> 上添加 overflow: hidden; 似乎可以解决这个问题。
我不确定为什么这么做可以解决问题，但我猜测问题出在 safari 尝试滚动 html/body 而不是你想要滚动的元素上。
因为可滚动的部分在一个 position:fixed 的元素内部，所以滚动 body 没有视觉效果，看起来好像什么也没发生。

0
-1

我曾经遇到过同样的问题，使用overflow:hidden可以防止body元素滚动，但是如果访问者想要滚动网页，它也会禁用网页滚动。因此，我创建了一个JQ解决方案，仅在需要时将.overflow-hidden类添加到body元素中。在我的情况下，当侧边栏具有活动类时。

$(document).click(function(){
    if ($(".siderbar_menu").hasClass("side-menu-active")) {
        $("body").addClass("overflow-hidden-mobile");
    } else {
        $("body").removeClass("overflow-hidden-mobile");
    };
});

对我来说可以。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接