Question

是否可以通过鼠标滚轮水平滚动div，而无需按住 shift ？

我知道使用鼠标滚轮插件的方法：

$("#test").mousewheel(function(event, delta) {
   var current = $(this).scrollLeft();
   $(this).scrollLeft(current - (delta * 80));
});

我尝试使用$(this).animate...滚动它，但它仍然看起来很难看。

我不需要在滚动时模拟浏览器内置的平滑度，因为它不是跨浏览器的方式，我需要自然地滚动它。

也许模拟 shift 持有mouseenter事件？

Answer 1

诀窍是从.deltaY形式转换.originalEvent ...然后使用jQuery .scrollLeft()。

由于增量始终为33.33333206176758或-33.33333206176758 ...您可以parseInt()除以33。然后，您将始终获得1或-1，您可以乘以您希望滚动的像素数量，在X轴上，每轮旋转。

// Variable to store current X scrolled position.
var current = 0;
// Pixel increment you wish on each wheel spin.
var ScrollX_pixelPer = 40;

// Event handler.
$("#test").on("mousewheel", function(e) {
  e.preventDefault();
  
  // Get the deltaY (always +/- 33.33333206176758) and multiply by the pixel increment you wish.
  var delta = ScrollX_pixelPer*(parseInt(e.originalEvent.deltaY)/33);
  
  // Increment/decrement current.
  current += delta;
  //console.log(current);
  
  // Apply the new position.
  $(this).scrollLeft(current);
  
});

#test{
  height:2.5em;
  overflow-y:scroll;
  white-space:nowrap;
}
.spacer{
  height:400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="spacer"></div>

<div id="test">
  Lorem ipsum dolor sit amet, no mel volutpat consequat. Doctus sanctus nec no, mea ei augue appellantur. Pro doming vocibus accusam at, eum ut alii debet temporibus. No qui suas utinam splendide, essent fastidii invidunt est et, cum an brute explicari neglegentur. Nihil putant invenire ea vix. Quis congue epicuri sed cu, ad errem nusquam mel. Commune fabellas rationibus te mea, vim ne justo illum sensibus.
</div>

<div class="spacer"></div>

Answer 2

所以好吧，我最近在努力实现该功能，我发现只要似乎不再支持mousewheel事件，可能与当前浏览器一起使用的最佳解决方案是：

    $(window).on('wheel', function(e){
    if ($.browser.mozilla) {
        e.preventDefault();
        var delta = -500*(parseInt(e.originalEvent.deltaY)/33);
        var scto = $(this).scrollLeft() - delta;
        $(this).scrollLeft(scto);}
    else{
        e.preventDefault();
        var delta = -50*(parseInt(e.originalEvent.deltaY)/33);
        var scto = $(this).scrollLeft() - delta;
        $(this).scrollLeft(scto);}
});`

Answer 3

我知道这有点晚了，但是我自己一直在寻找答案，并且在研究Louys的代码时，我发现似乎更好一些。

$("#test").on("mousewheel", function(e) {
  e.preventDefault();
  var delta = 40*(parseInt(e.originalEvent.deltaY)/33);
  var scto = $(this).scrollLeft() - delta;
  $(this).scrollLeft(scto);
});

它基本上不需要变量来跟踪scroll_to位置，因为它是从scrollLeft（）获取值并减去差值，从而基本上解决了先前版本中出现的两个问题，其中一个是该函数现在可以不会滚动超过元素的总宽度并且不会变负，其次是如果现在使用滚动条更改滚动位置，它不会像以前那样弄乱代码。

（我还删除了ScrollX_pixelPer，因为我认为您不需要一个完整的变量来表示一个简单的数字）

鼠标滚轮上的水平滚动

3 个答案: