Question

我有横向滚动干.,很容易通过马卡球板进行航行,但用 mo子进行航行的梦.。用户必须实际点击和绕开页底部的滚动,以便通过内容进行滚动。

Here,是使用javascript解决办法之一与jsfiddle相联系的。易于横向发展,但仍然无法横向使用湿轮。

我需要确保,解决办法不会破坏双向发展的经验,而只会使利用摩擦的滚动成为可能。例如,我看到,如果用户仅仅持有转子,他们就能与 mo轮或OR子完全正常。或许一个工作环绕只是起草一些法典,迫使改变关键,迫使用户整整页? 声音,如干.。而只是使用干.。

在这里,Im试图使用——

<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>

请指出: 我删除了图像,并简化了这些图像,因为它们与这一问题无关。而我不希望找到一个中心解决方案。谢谢!

EDIT: something else to note, the user will never be scrolling vertically on any of the webpages. Maybe this makes the solution even easier?

EDIT2: This image shows the error I get when trying the code in the suggested answer on this post... my content still only scrolls horizontally with a vertical mousewheel when I hold down the shift key...

Answer 1

我没有一张马桶或一个跟踪板,因此,你必须测试这些理论,但你的法典与摩西勒合作,因此,只有问题才是跟踪问题。 Probable e.preventDefault(); 防止跟踪台向横向发展。

Solution 1: If your trackpad already fires horizontal scroll events, try not preventing the event if e.deltaX has a value (different than 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

Solution 2: If solution 1 is not what you want, then try deleting e.preventDefault(); lines completely. You already said users will not be scrolling vertically at all, so we actually don t need this line. If you want to make sure there will be no vertical surprises, we can try to prevent this on the html meta tags by adding

<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 style="overflow-y: hidden; height: 100vh;">
 some page content
</body>

这样做应足以防止垂直滚动,同时又不防止垂直滚动。

EDIT: Regarding to your comment, yes your code works for me. Guessing that you only have one horizontalstorecontainer per page, you can add the event listener to the document rather than container for better results:

 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

我正在发现一个错误<代码>。无法预防被动事件中的过失......和添加{绕道:虚假} 解决了我的问题,但是,如果这个问题与你的问题有关,或者如果能够打破你可能拥有的一些其他活动/守则,那不会确定。

这对我来说是一个集装箱,有<代码>over-x: scroll;。当使用该代码时,网页只用我的滚动轮机横向停机,只有我的集装箱滚动。把它放在幼苗上。

也许你们可以通过添加<条码>console.log(e);到职能开始,看该事件是否向您的摩苏尔开枪,而且你还可以看到你正在拿到<条码>。 Y Value 您想要的。如果这次活动发射得很好,则检查集装箱,看看看它为什么不移动。

友情链接