平滑的水平滚动绑定到鼠标滚轮

下面是使用鼠标滚轮进行水平滚动的工作示例，但它不能像Firefox或Opera中的普通垂直滚动一样平滑滚动。

$(function() { $("html, body").mousewheel(function(event, delta) { this.scrollLeft -= (delta * 30); event.preventDefault(); }); }); 

（ http://brandonaaron.net/code/mousewheel/docs ）

我做了现场演示，向您展示它是如何发生的。 http://jsfiddle.net/Dw4Aj/

我希望这个滚动像垂直滚动一样工作。 两者都有鼠标滚轮和光滑度。 有人能帮我吗？

Answer 1

平滑滚动是浏览器特定的function。

如果你想要的东西适用于所有这些东西，那么你需要在你身边做。 jQuery有多种平滑滚动的实现。

实际上你甚至可能需要所谓的动态滚动。 如果是这样，试试jquery.kinetic

Answer 2

我认为它是记住最后一个滚动事件时间戳，使用缓动function，以获得良好的结果http://jsfiddle.net/oceog/Dw4Aj/13/

 $(function() {   $("html, body").mousewheel(function(event, delta) {     var mult = 1;     var $this = $(this);     if (event.timeStamp - $this.data('oldtimeStamp') < 1000) {       //calculate easing here       mult = 1000 / (event.timeStamp - $this.data('oldtimeStamp'));     }     $this.data('oldtimeStamp', event.timeStamp);     this.scrollLeft -= (delta) * mult;     event.preventDefault();   }); });​ 

Answer 3

尝试将您的函数与.animate（）结合使用

 $(function() { $("html, body").mousewheel(function(event, delta) { var scroll_distance = delta * 30 this.animate(function(){ left: "-=" + scroll_distance + "px", }); event.preventDefault(); }); }); 

我实际上是自己做了这件事并且有效。 我在我创建的Web应用程序上创建了一个Instagram feed，而我正在使用的其他插件经常崩溃：

 $('#add_instagram').on('mousewheel', function(e,d){ var delta = d*10; $('#move_this').animate({ top: "-=" + delta + "px" },3); e.preventDefault(); }); 

Answer 4

我找到了其他不错的解决方案 – 使用包装器，所以你滚动绝对滚动到相同的位置，如果你只需要滚动，没有文本选择或其他（可能可以工作，但我很累）

 $(function() {   var scroll = $('.scrollme');   var h = scroll.parent().height();   var w = scroll.parent().width();   var t = scroll.offset().top;   var l = scroll.offset().left;   var vertscroll_wrap = $("
").height(h).width(10000).css('position', 'absolute').css('top', t).css('left', l).css('z-index', 10000).css('opacity', 0.5).css('overflow-y', 'scroll');   var vertscroll = $('
').height(10000).css('width', '100%').css('opacity', 0.5);   vertscroll_wrap.append(vertscroll);   $('body').append(vertscroll_wrap); vertscroll_wrap.height('100%');   vertscroll_wrap.scroll(function() {     $(scroll).parent().scrollLeft($(this).scrollTop());   }); });​ 

http://jsfiddle.net/oceog/Dw4Aj/16/

我做了另一个样本，现在没有整理包装，可以选择http://jsfiddle.net/oceog/DcyWD/

Answer 5

我只想把它留在这里。

http://jsfiddle.net/Dw4Aj/19/

 jQuery(document).ready(function($) { $("html, body").mousewheel(function(e, delta) { $('html, body').stop().animate({scrollLeft: '-='+(150*delta)+'px' }, 200, 'easeOutQuint'); e.preventDefault(); }); }); 

Answer 6

只需改变这个：

 this.scrollLeft -= (delta * 30); 

对此：

 this.scrollLeft -= (delta * 1);