水平スクロールで垂直スクロールを置き換えます。vanilla javascript

Question

バニラ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

あなただけのマウスホイールのイベントに影響する場合は、「ホイール」イベントを使用して試すことができます。これは私のテストでFirefoxとChromeで動作します。 IEではなく（編集：実際には、イベントはスクロールに使用されたメソッドを呼び出すだけで、動作しないように見えるので、IEでも同様に動作する可能性があります）。

次に、event.deltaYを使用してスクロールが垂直かどうかを判断し、それを防止します。また、event.deltaYの方向を代わりに水平方向にスクロールしてください（少し遅く感じたので5倍しましたが、スクロール量をw/eに変更することができます）。

あなたの更新jsfiddle

/* We define our function */ 
 
    function replaceVerticalScrollByHorizontal(event) { 
 
    \t if (event.deltaY != 0) { 
 
     \t // manually scroll horizonally instead 
 
     window.scroll(window.scrollX + event.deltaY * 5, window.scrollY); 
 
     
 
     // prevent vertical scroll 
 
     \t 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>