Jquery 如何使2个水平滚动div独立移动？

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

下面是显示问题的基本代码：

下面是运行两个滚动条的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中。任何想法或建议都会很好

我认为您的问题在于，您在两个div之间共享scrollHandle和其他变量。您可以使用该方法独立地保持每一个的状态。

我认为您的小提琴的更新正按照您的意愿工作。问题是您将父项设置为两个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);
});