iOS Safari垂直滚动感觉粘滞(没有动量)

时间:2022-08-24 10:43:28

I've got a problem with vertical scroll in iOS Safari on a web page: while being scrolled, page moves in a very slow way, with high resistance (such behavior is not usual for iOS browsers)

我在网页上的iOS Safari中遇到垂直滚动问题:在滚动时,页面以非常慢的方式移动,具有高阻力(这种行为对于iOS浏览器来说并不常见)

My attempts to locate the problem:

我试图找到问题:

<!-- piece of HTML listing -->
<body>
    <div id="wrapper">
          (here goes some content)
    </div>
</body>

I detected the problem in the overflow-x:hidden; rule for div#wrapper, changing it to 'overflow:hidden;' or removing it dynamically in web debugging panel.

我在overflow-x中发现了问题:隐藏; div#wrapper的规则,将其更改为'overflow:hidden;'或者在Web调试面板中动态删除它。

Is there any chance to fix it without changing the page layout?

有没有机会在不改变页面布局的情况下修复它?

Repeats on Safari / iOS 6.1.4 and 7 (both iPad and iPhone), also in iOS Simulator on OS X.

在Safari / iOS 6.1.4和7(包括iPad和iPhone)上重复,也在OS X上的iOS模拟器中重复。

1 个解决方案

#1


8  

You can try to add the webkit specific css line to you div:

您可以尝试将webkit特定的css行添加到div:

#wrapper{
    -webkit-overflow-scrolling: touch;
}

read more about momentum and ios scrolling here: http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

阅读更多关于动量和ios滚动的信息:http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

#1


8  

You can try to add the webkit specific css line to you div:

您可以尝试将webkit特定的css行添加到div:

#wrapper{
    -webkit-overflow-scrolling: touch;
}

read more about momentum and ios scrolling here: http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

阅读更多关于动量和ios滚动的信息:http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/