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