我们遇到了一个问题，让momentum-based scrolling 在 root <html> 的 iOS Safari 上工作。元素。
以下确实得到了预期的结果:
<br/>
html {
height: 100%;
overflow-y: scroll;
}<p></p>
<p>body {
height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
</p>但是，滚动条从屏幕上完全消失了。
尝试了以下建议来取回滚动条，但不起作用。
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}<p></p>
<p>::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
</p>这也行不通:
body {
height: calc(100% + 1px);
}
当我说滚动条消失时，我的意思是滚动条根本不存在。以下 JS 打印“0”，即使在页面向下滚动到一半时也是如此:
const y = document.body.scrollTop ||
document.documentElement.scrollTop ||
document.scrollingElement.scrollTop;<p></p>
<p>console.log(y);
</p>我知道 iOS Safari 上基于动量的滚动有问题。
- 有没有人设法让根滚动工作
<html>元素？ - 有没有人对如何获取滚动值有任何建议
document.body.scrollTop？
我们目前不打算使用任何外部库。
谢谢
最佳答案
使用此 CSS 属性并重试。
-webkit-overflow-scrolling: touch;https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling
关于javascript - 如何获得在 iOS Safari 上工作的根 <html> 元素的基于动量的滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43277181/