javascript 优先滚动元素

wrrgggsh  于 2023-01-01  发布在  Java
关注(0)|答案(1)|浏览(162)

我在移动设备上使用我的网站时遇到了一些滚动问题(在iPhone上测试)。
问题是,在移动设备上,当触摸或移动手指到可滚动的div之外时,当尝试在此之后滚动此div时,它会被阻止,直到您等待片刻或缓慢滚动或触摸它。
https://imgflip.com/gif/75nefo显示了我的问题。当滚动到"可滚动"之外时,然后当滚动回可滚动时,它会不断滚动整个身体,并需要多尝试几次,直到它最终滚动到我想要的地方。
网站如下所示,如gif所示。

  1. body{
  2. margin: 0;
  3. padding: 0;
  4. }
  5. .frame{
  6. display: flex;
  7. flex-direction: column;
  8. width: 100%;
  9. height: 100vh;
  10. background-color: lightblue;
  11. overflow: hidden;
  12. }
  13. .scrollable{
  14. overflow: scroll;
  15. }
  16. .bottom-nav{
  17. width: 100%;
  18. background-color: lightcoral;
  19. padding: 30px 10px;
  20. box-sizing: border-box;
  21. }
  22. .sample-cube{
  23. background-color: lightgreen;
  24. box-sizing: border-box;
  25. padding: 10px;
  26. width: 100%;
  27. height: 200px;
  28. }
  29. .sample-cube + .sample-cube{
  30. margin-top: 10px;
  31. }
  1. <body>
  2. <div class="frame">
  3. <div class="scrollable">
  4. <div class="sample-cube"> this is stuff on the scrollable area</div>
  5. <div class="sample-cube"> </div>
  6. <div class="sample-cube"> </div>
  7. <div class="sample-cube"> </div>
  8. <div class="sample-cube"> </div>
  9. <div class="sample-cube"> </div>
  10. <div class="sample-cube"> </div>
  11. </div>
  12. <div class="bottom-nav">
  13. navigation area with options
  14. </div>
  15. </div>
  16. </body>

我想知道是否有什么方法可以给可滚动的div一个优先级,这样,无论何时滚动它,它都会从第一个手指触摸滑动开始滚动,而不是被锁定...

n7taea2i

n7taea2i1#

最终找到了一些适合我的东西,在做了一些调查后,这个问题似乎与IOS Safari如何处理滚动有关。This question有许多方法作为答案,但有一个特别适合我。
有一个库可以让你阻止身体滚动,当你想要一个固定的身体像我的情况下,并允许滚动只在一定的元素。它的工作就像一个魅力!!!
Body Scroll Lock on npmjs
现在我的滚动不'冻结'当我滚动我的滚动元素外,并迅速滚动我的滚动元素了!

相关问题