javascript 绑定到鼠标滚轮的平滑水平滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13000111/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Smooth horizontal scroll bound to mousewheel
提问by Vladimir Wood
Here is a working example of horizontal scroll with mousewheel, but it does not scroll smoothly. By smoothly I mean like ordinary vertical scroll in Firefox or Opera.
这是使用鼠标滚轮进行水平滚动的工作示例，但滚动不顺畅。平滑我的意思是像 Firefox 或 Opera 中的普通垂直滚动。
$(function() {
$("html, body").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});
(http://brandonaaron.net/code/mousewheel/docs)
（http://brandonaaron.net/code/mousewheel/docs）
I've made a live demo to demonstrate this. http://jsfiddle.net/Dw4Aj/
我做了一个现场演示来演示这一点。 http://jsfiddle.net/Dw4Aj/
I want this scroll to work like the vertical one, both with mousewheel and smoothness.
我希望这个滚动条像垂直滚动条一样工作，同时具有鼠标滚轮和平滑度。
Can someone help me?
有人能帮我吗？
采纳答案by Vladimir Wood
I'm just going to leave this here.
我只是要离开这里。
jQuery(document).ready(function($) {
$("html, body").mousewheel(function(e, delta) {
$('html, body').stop().animate({scrollLeft: '-='+(150*delta)+'px' }, 200, 'easeOutQuint');
e.preventDefault();
});
});
回答by c-smile
Smooth scrolling is a browser specific feature.
平滑滚动是浏览器特有的功能。
If you want something that works on all of them then you need to do it on your side. There are multiple implementations of smooth scrolling for jQuery.
如果你想要一些对所有这些都有效的东西，那么你需要在你身边做。jQuery 有多种平滑滚动的实现。
And actually you may even need so called kinetic scrolling. If so try jquery.kinetic
实际上，您甚至可能需要所谓的动态滚动。如果是这样，请尝试jquery.kinetic
回答by zb'
1st i think about it is to remember last scroll event timestamp, play with easing function, to get good result http://jsfiddle.net/oceog/Dw4Aj/13/
第一个我想到的是记住上次滚动事件时间戳，使用缓动功能，以获得良好的结果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();
? ??});
});?
回答by Brian Noah
Try to use your function in conjunction with .animate()
尝试将您的函数与 .animate() 结合使用
$(function() {
$("html, body").mousewheel(function(event, delta) {
var scroll_distance = delta * 30
this.animate(function(){
left: "-=" + scroll_distance + "px",
});
event.preventDefault();
});
});
I just actually did this myself and it works. I created an instagram feed on the web application that I created, and the other plugins that I was using were breaking all too often:
我只是自己做了这个，它有效。我在我创建的 Web 应用程序上创建了一个 instagram 提要，而我使用的其他插件经常中断：
$('#add_instagram').on('mousewheel', function(e,d){
var delta = d*10;
$('#move_this').animate({
top: "-=" + delta + "px"
},3);
e.preventDefault();
});
回答by zb'
I found other nice solution - to use wrapper, so you scroll absolute to same position as you would to scroll vertical, it works if you just need scroll, no text selection or other(may be can work arounded, but i tired)
我找到了其他不错的解决方案 - 使用包装器，所以你绝对滚动到与垂直滚动相同的位置，如果你只需要滚动，没有文本选择或其他（可能可以解决，但我累了）
$(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 = $("<div>").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 = $('<div>').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/Dw4Aj/16/
i made another sample, now without wholescreen wrapper, and possibility to select http://jsfiddle.net/oceog/DcyWD/
我制作了另一个示例，现在没有全屏包装器，并且可以选择 http://jsfiddle.net/oceog/DcyWD/
回答by Amir Rezvani
Just change this:
只需改变这个：
this.scrollLeft -= (delta * 30);
to this:
对此：
this.scrollLeft -= (delta * 1);
