javascript - 如何防止人们使用鼠标滚轮滚动按下我们的触摸拖动？

Question

在 HTML/CSS/JS 中，有一件事我很难搞清楚:如何防止人们使用鼠标滚轮按下来滚动元素(即按住鼠标滚轮并拖动，或单击鼠标滚轮，拖动，再次单击鼠标滚轮)以及当人们尝试拖动元素时如何做同样的事情在触摸设备上。

这是我在尝试制作汉堡式菜单时偶然发现的东西。

将元素的 CSS 设置为 overflow: hidden 将隐藏滚动条，但使用以上两种方法，仍然可以轻松滚动滚动条。到目前为止，我发现的唯一“解决方案”是制作第二个元素，并将其放置在不应滚动的元素之上。但这对我来说似乎不是一个完美的解决方案。

• 如何使用 JavaScript 捕获这些事件？
• 如何，例如，this page , 菜单打开时水平和垂直滚动被阻止？

Answer 1

如果您创建一个 jsfiddle，我们可以提供更好的解决方案。如果您对 jquery 没问题，我可以针对您的第二点“例如，在这个页面上，当菜单打开时如何阻止水平和垂直滚动？”我可以提供一些解决方案。

首先您需要创建一个如下所示的简单类。

.overhidden
{
 overflow:hidden !important;
}

接下来，我们需要在您按下屏幕上的菜单图标时应用此类。如果他们再次点击关闭，我们也需要删除。在 jquery 中很容易做到，如下所示。

 $(document).ready(function(){
   $('#hamburger').click(function(){
      $('body').toggleClass('overhidden');
   });
 });