javascript - 滚动已到达顶部的内容时，在 bootstrap4 模式上滚动锁定

Question

我有一个带有可滚动内容的 bootstrap 4 模式。
如果我在内容的顶部并且我尝试向下滚动(这不会做任何事情，因为我已经在可滚动内容的顶部)然后仍然按住触摸(触摸端仍然没有发生在这里) 然后我尝试以另一种方式滚动，滚动是 锁定直到我离开触摸(touchend发生)然后现在尝试向另一个方向滚动时才会工作。
我在触摸设备上遇到了这个困难(不管操作系统)。

这可能不是错误，而是有意的，但我无法想出一种方法来改变行为，以便即使已经在顶部我也可以连续滚动。



codepen.io/heychris/pen/dMExrG
重新创建步骤 - 在 chrome 中打开开发者工具，更改为 iPhone X 等触控设备

Answer 1

我认为这可以解决您的问题

body {
  padding: 20px;
}

div {
  width: 200px;
  height: 200px;
  margin-right: 20px;
  overflow-y: scroll; /* has to be scroll, not auto */
  float: left;
}

.touch {
  -webkit-overflow-scrolling: touch;
}

<div class="touch">
<h3>Smooth</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>