用水平滚动 vanilla javascript 替换垂直滚动

Question

我想在 Vanilla JavaScript 中禁用垂直滚动并将其替换为水平滚动。当我尝试替换我的滚动值时，我被阻止了。我相信有一个简单（非常简单）的解决方案！

/* We define our function  */
function replaceVerticalScrollByHorizontal() {
  let scrollX = window.scrollX; /* Horizontal ➡️ */
  let scrollY = window.scrollY; /* Vertical ⬇️ */
  console.log({scrollX, scrollY});

  if (scrollY !== 0) {
    /* If there is a changement in verticalScroll  ⬇️ */
    const tempScrollY = scrollY; /* We create a temporary var to stock our scrollY value */
    scrollX = scrollY; /* Horizontal = Vertical */
    scrollY = 0; /* We reset the vertical because we don't want any vertical scroll */
    window.scrollTo(scrollX, scrollY); /* We scroll to our value */
    scrollY = tempScrollY; /* We replace the value of our vertical var with the temporary one */
  }
  /* If no verticalScroll changement, exit of this function  ⬇️ */
  return;
}

/* Listener on window once we start scrolling, we run our function  */
window.addEventListener('scroll', replaceVerticalScrollByHorizontal);

我的问题有点 jsfiddle：https://jsfiddle.net/zynj64m7/2/

Answer 1

如果您只想影响鼠标滚轮事件，您可以尝试使用 "wheel" 事件。这在 Firefox 和 Chrome 我的测试中有效。不是 IE（编辑：实际上事件确实触发只是我用来滚动的方法似乎不起作用所以你也可以让它在 IE 中工作）。

然后用event.deltaY判断滚动是否垂直，防止滚动。也可以使用 event.deltaY 的方向来水平滚动一些方向（我乘以 5 因为它看起来有点慢但是你可以将滚动量更改为 w/e）。

你的更新jsfiddle

    /* We define our function  */
    function replaceVerticalScrollByHorizontal(event) {
     if (event.deltaY != 0) {
       // manually scroll horizonally instead
        window.scroll(window.scrollX + event.deltaY * 5, window.scrollY);
        
        // prevent vertical scroll
       event.preventDefault();
      }
      return;
    }

    /* Listener on window once we start scrolling, we run our function  */
    window.addEventListener('wheel', replaceVerticalScrollByHorizontal);

  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>
  <h1>Hellooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</h1>

用水平滚动 vanilla javascript 替换垂直滚动

Replace vertical scroll by horizontal scroll vanilla javascript

javascript

scroll

horizontal-scrolling

vertical-scrolling