用水平滚动香草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);

我的问题有一点点问题： 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>