如何使 2 个水平滚动的 div 独立移动？答案

【问题标题】：How can I make 2 horizontally scrolling divs move independently?如何使 2 个水平滚动的 div 独立移动？
【发布时间】：2014-08-01 19:51:59
【问题描述】：

我正在构建的页面上有多个水平滚动的 div。我希望它们彼此独立移动（当一个滚动时其他人保持不动）但现在它们都一起移动。

这是显示问题的基本代码的 jsfiddle：http://jsfiddle.net/2HxCH/2/

这是运行两个滚动条的 javascript：

(function () {

    var scrollHandle = 0,
        scrollStep = 5,
        parent = $("#container, #container2");

    //Start the scrolling process
    $(".panner").on("mouseenter", function () {
        var data = $(this).data('scrollModifier'),
            direction = parseInt(data, 10);

        $(this).addClass('active');

        startScrolling(direction, scrollStep);
    });

    //Kill the scrolling
    $(".panner").on("mouseleave", function () {
        stopScrolling();
        $(this).removeClass('active');
    });

    //Actual handling of the scrolling
    function startScrolling(modifier, step) {
        if (scrollHandle === 0) {
            scrollHandle = setInterval(function () {
                var newOffset = parent.scrollLeft() + (scrollStep * modifier);

                parent.scrollLeft(newOffset);
            }, 10);
        }
    }

    function stopScrolling() {
        clearInterval(scrollHandle);
        scrollHandle = 0;
    }

}());

我已经尝试了所有我能在 CSS 和 html 中想到的东西来将它们分开，所以我猜测修复是在 js 中。任何想法或建议都会很棒！

【问题讨论】：

标签： jquery scroll horizontal-scrolling

【解决方案1】：

我认为您的问题是您在两个divs 之间共享scrollHandle 和其他变量。您可以使用jQuery.data 方法来保持每个独立的状态。

【讨论】：

【解决方案2】：

Here's 更新你的小提琴，我认为它正在按照你的意愿工作。问题是您将父级设置为两个 div。我添加了一种方法来区分应该滚动哪个 div。

以下是相关更改：

//Start the scrolling process
$(".panner").on("mouseenter", function () {
    var data = $(this).data('scrollModifier'),
        direction = parseInt(data, 10);
    var parentId = $(this).data('scrollDiv');
    parent = $('#' + parentId);

    $(this).addClass('active');

    startScrolling(direction, scrollStep);
});

【讨论】：