我在移动设备上使用我的网站时遇到了一些滚动问题（在iPhone上测试）。
问题是，在移动设备上，当触摸或移动手指到可滚动的div之外时，当尝试在此之后滚动此div时，它会被阻止，直到您等待片刻或缓慢滚动或触摸它。
https://imgflip.com/gif/75nefo显示了我的问题。当滚动到"可滚动"之外时，然后当滚动回可滚动时，它会不断滚动整个身体，并需要多尝试几次，直到它最终滚动到我想要的地方。
网站如下所示，如gif所示。
body{
margin: 0;
padding: 0;
}
.frame{
display: flex;
flex-direction: column;
width: 100%;
height: 100vh;
background-color: lightblue;
overflow: hidden;
}
.scrollable{
overflow: scroll;
}
.bottom-nav{
width: 100%;
background-color: lightcoral;
padding: 30px 10px;
box-sizing: border-box;
}
.sample-cube{
background-color: lightgreen;
box-sizing: border-box;
padding: 10px;
width: 100%;
height: 200px;
}
.sample-cube + .sample-cube{
margin-top: 10px;
}<body>
<div class="frame">
<div class="scrollable">
<div class="sample-cube"> this is stuff on the scrollable area</div>
<div class="sample-cube"> </div>
<div class="sample-cube"> </div>
<div class="sample-cube"> </div>
<div class="sample-cube"> </div>
<div class="sample-cube"> </div>
<div class="sample-cube"> </div>
</div>
<div class="bottom-nav">
navigation area with options
</div>
</div>
</body>我想知道是否有什么方法可以给可滚动的div一个优先级，这样，无论何时滚动它，它都会从第一个手指触摸滑动开始滚动，而不是被锁定...
1条答案
按热度按时间n7taea2i1#
最终找到了一些适合我的东西，在做了一些调查后，这个问题似乎与IOS Safari如何处理滚动有关。This question有许多方法作为答案，但有一个特别适合我。
有一个库可以让你阻止身体滚动，当你想要一个固定的身体像我的情况下，并允许滚动只在一定的元素。它的工作就像一个魅力！！！
Body Scroll Lock on npmjs
现在我的滚动不'冻结'当我滚动我的滚动元素外，并迅速滚动我的滚动元素了！