Question

以下是带鼠标滚轮的水平滚动的工作示例，但不能平滑滚动。顺便说一句，我的意思是像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

平滑滚动是一项特定于浏览器的功能。

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

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

Answer 2

第一，我认为要记住上次滚动事件时间戳，使用缓动功能，以获得良好的结果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 = $("<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/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);

Answer 7

您可以尝试通过简单地使用scrollBy来利用内置的滚动行为浏览器：

const target = document.getElementsByClassName('whatever')[0];
target.addEventListener('wheel', event => {
    event.preventDefault();
    target.scrollBy({
    left: event.deltaY*0.5,    
    behavior: 'smooth'
});

}）

当您在浏览器完成平滑滚动之前进行更多滚动时，这有点草率（因为平滑滚动需要一些时间才能完成“动画”），但是在某些情况下它确实可以完成工作。

您还可以通过设置css属性scroll-behavior: smooth，然后在元素上显式设置target.scrollLeft = ...来实现相同的目的。两种方法本质上都使用浏览器的内置滚动实现（也许Safari和IE10除外，因为到目前为止它们都不支持这种平滑的行为）

Answer 8

我修复了重新滚动到上一个滚动末尾时卡住的问题。

纯js。

const el = document.getElementsByClassName('whatever')[0];
let sumDelta = 0
let startLeft = 0
let targetLeft = 0
el.addEventListener('wheel', (e) => {
    if (el.scrollLeft === targetLeft) sumDelta = 0
    if (sumDelta === 0) startLeft = el.scrollLeft
    sumDelta -= e.deltaY
    const maxScrollLeft = el.scrollWidth - el.clientWidth;
    const left = Math.min(maxScrollLeft, Math.max(0, startLeft - sumDelta));
    targetLeft = left
    el.scrollTo({left, behavior: "smooth"})
    e.preventDefault();
})

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

8 个答案: