jquery 水平滚动div不会滚动使用鼠标滚轮

laawzig2 于 12个月前发布在 jQuery

关注(0)|答案(1)|浏览(181)

我有一个水平滚动的div，通过mac的触摸板很容易导航，但是用鼠标导航就像噩梦一样，用户必须通过页面底部的滚动条点击和拖动才能滚动内容。
我尝试过从this post到我的代码中实现许多解决方案，但还没有让它们中的任何一个工作。
Here是一个使用JavaScript解决方案的jsfiddle的链接。很容易用触控板水平滚动，但仍然无法使用鼠标滚轮水平滚动。
我需要确保这个解决方案不会破坏触控板的滚动体验，而只是让它也可以使用鼠标滚轮滚动。例如，我看到，如果用户只是按住Shift键，他们可以完全正常地使用鼠标滚轮或触控板滚动。也许一个解决方案就是编写一些代码，强制用户在页面上的整个时间都按下Shift键？听起来像是一个愚蠢的解决办法，哈哈。我宁愿使用能工作的JavaScript。
下面是我尝试使用的代码-

<script>
  
 const container = document.getElementById("horizontalstorecontainer");
// where "container" is the id of the container
  container.addEventListener("wheel", function (e) {
    if (e.deltaY > 0) {
      container.scrollLeft += 100;
      e.preventDefault();
// prevenDefault() will help avoid worrisome 
// inclusion of vertical scroll 
    }
    else {
      container.scrollLeft -= 100;
      e.preventDefault();
    }
  });
// That will work perfectly 

  </script>

字符串
请注意，我删除了图像等简化，因为他们是不是在所有相关的这个问题。我不是在寻找一个CSS解决方案。谢谢！
编辑：另外要注意的是，用户永远不会在任何网页上垂直滚动。也许这使得解决方案更容易？
编辑2：This图片显示了我在尝试这篇文章的建议答案中的代码时得到的错误.当我按住Shift键时，我的内容仍然只能用垂直的鼠标轮水平滚动.

jquery

来源：https://stackoverflow.com/questions/77761437/horizontally-scrolling-div-wont-scroll-using-mouse-wheel

1条答案

按热度按时间

eivgtgni1#

我没有mac或触控板，所以你必须测试这些理论，但你的代码与鼠标滚轮工作，所以唯一的问题是触控板的问题。可能e.preventDefault();阻止触控板水平滚动。

解决方案1：如果您的触控板已经触发了水平滚动事件，请尝试在e.deltaX具有值（不同于0）时不阻止该事件。

if (e.deltaX == 0) { 
    //this scroll is not horizontal
    //still prevent it and manually adjust scrollLeft
      if (e.deltaY > 0) {
        container.scrollLeft += 100;
        e.preventDefault();
      }
      else {
        container.scrollLeft -= 100;
        e.preventDefault();
      }
    }
    //else let the horizontal scroll work

字符串

方案二：如果解决方案1不是你想要的，那么试着完全删除e.preventDefault();行。你已经说过用户根本不会垂直滚动，所以我们实际上不需要这一行。如果你想确保不会有垂直的惊喜，我们可以尝试在html Meta标签上添加

<head>
<meta name="viewport" content="height=device-height"/>`
</head>

型
您可以选择阻止缩放：

<head>
<meta name="viewport" content="height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>`
</head>

型
我们可以为body元素设置一些样式，以确保：

<body style="overflow-y: hidden; height: 100vh;">
 some page content
</body>

型
这应该足以防止垂直滚动，而不会在JavaScript中阻止它。
编辑：关于你的评论，是的，你的代码对我来说很有效。我猜你每页只有一个horizontalstorecontainer，你可以将事件侦听器添加到document而不是container以获得更好的结果：

const container = document.getElementById("horizontalstorecontainer");
// where "container" is the id of the container
  document.addEventListener("wheel", function (e) { //edit this line <--
    if (e.deltaY > 0) {
      container.scrollLeft += 100;
      e.preventDefault();
// prevenDefault() will help avoid worrisome 
// inclusion of vertical scroll 
    }
    else {
      container.scrollLeft -= 100;
      e.preventDefault();
    }
  }, {passive: false}); //try this if you are getting my error below

型
我得到一个错误Unable to preventDefault inside passive event...和添加{passive: false}解决了我的问题，但我不确定这是否与您的问题有关，或者这是否会破坏您可能有的其他事件/代码。
这对我来说是一个有overflow-x: scroll;的容器。当我运行这段代码时，网页停止滚动，只有我的容器用我的滚轮水平滚动。在Chrome上尝试过。
也许你可以通过在函数的开头添加console.log(e);来调试这个事件，看看这个事件是否为你的鼠标轮触发，你也可以看看你是否得到了你想要的deltaY值。如果这个事件完美地触发了，检查容器看看为什么它没有移动。

赞(0）回复(0）举报 12个月前

我来回答

jquery 水平滚动div不会滚动使用鼠标滚轮

1条答案

相关问题

热门标签

最新问答