如何在所有浏览器中平滑滚动

时间:2017-09-06 01:08:45

标签: html css web scroll overflow

我最近注意到,如果你有一个包含可滚动的溢出内容的div,在chrome中,你可以顺利地将滚动从该div转移到身体的其他部分,但在Safari中,你不能。当您到达所包含元素的顶部或底部时,滚动停止而不是平滑过渡,您必须再次滚动才能开始在主体上滚动。这对我正在进行的项目至关重要,我允许Safari以与Chrome相同的方式平滑滚动。对于我的生活,我无法弄清楚如何做到这一点。感谢您的任何投入,谢谢您的时间!

2 个答案:

答案 0 :(得分:0)

您可以尝试转到可滚动的CSS元素的设置。虽然在没有看到您的代码的情况下我无法帮助您,但请尝试实现这些:

  -webkit-overflow-scrolling: touch; 
  overflow-y: scroll;

我通常将这些应用于iOs设备并且它可以解决问题。不是100%确定它是否有助于解决您的问题。

答案 1 :(得分:0)

Safari会故意分离不同元素的滚动手势,以便用户可以清楚地分辨出正在滚动的元素。

当然,您可以使用JavaScript以一种黑客的方式解决这个问题。例如,您可以将ScrollTop body设置为当 div 到达底部时用户滚动的金额。