ScrollDownでbody scrollLeftを作成する方法

Question

ユーザーがスクロールしたときにhtmlがスクロールして右にスクロールできるようにしたいと思っていたコードをまとめました

私は、垂直スクロールからユーザーを防ぐため、垂直スクロールではなく、水平方向のスクロールを起こしたいする必要がJSFIDDLE

$(document).ready(function() { 
    $(window).bind('mousewheel', function(e) { 
     e.preventDefault(); 
     if (e.originalEvent.wheelDelta >= 0) { 
      $('html, body').scrollRight(1); 
     } 
     else { 
      $('html, body').scrollLeft(1); 
     } 
    }); 
}); 

ここに一緒に私のコードの例を入れています。

Answer 1

まず、preventDefault()コールの最後に、かっこがありません。そのため、垂直スクロールバーは引き続き機能します。

第2に、scrollRight()のようなjQueryメソッドはありません。両方向にscrollLeft()メソッドを使用する必要があります。

更新されたfiddleを参照してください。

Answer 2

scrollLeftメソッドはjQueryで定義されていないため、scrollLeftを使用する必要があります。

引数を指定せずにscrollLeftを呼び出すと、現在のスクロール位置（左端から開始）が取得されます。 scrollLeft（value）を呼び出すと、現在のスクロール位置が値（https://api.jquery.com/scrollleft/）に設定されます。

次のスニペットが機能します。

$(document).ready(function() { 
 
    var body = $('body'); 
 
    $(window).bind('mousewheel', function(e) { 
 
    e.preventDefault(); 
 
    body.scrollLeft(body.scrollLeft() - e.originalEvent.wheelDelta); 
 
    }); 
 
});

section { 
 
    width: 500vw; 
 
    height: 100vh; 
 
    
 
    /*unimportant */ 
 
    background: rgba(76,76,76,1); 
 
    background: -moz-linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); 
 
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(76,76,76,1)), color-stop(12%, rgba(89,89,89,1)), color-stop(25%, rgba(102,102,102,1)), color-stop(39%, rgba(71,71,71,1)), color-stop(50%, rgba(44,44,44,1)), color-stop(51%, rgba(0,0,0,1)), color-stop(60%, rgba(17,17,17,1)), color-stop(76%, rgba(43,43,43,1)), color-stop(91%, rgba(28,28,28,1)), color-stop(100%, rgba(19,19,19,1))); 
 
    background: -webkit-linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); 
 
    background: -o-linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); 
 
    background: -ms-linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); 
 
    background: linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c', endColorstr='#131313', GradientType=1); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section></section>