Question

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

以下是显示问题的基本代码：[{3}}

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

Answer 1

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

Answer 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);
});

如何让2个水平滚动的div独立移动？

2 个答案: