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

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 提要，而我使用的其他插件经常被破坏：

$('#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'
});

})

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

scroll-behavior: smooth您也可以通过设置 css 属性，然后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();
})