如何使身體scrollLeft上Scrolldown已反之亦然

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()調用結束時的括號。這就是垂直滾動條仍然有效的原因。

其次，沒有像scrollRight()這樣的jQuery方法。您應該使用兩種方向的scrollLeft()方法。

查看更新的fiddle！

Answer 2

scrollRight方法沒有被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>