javascript - 如何显示两个水平滚动菜单栏

Question

我需要为我的网站显示两个水平滚动菜单栏。所以我搜索并找到了带有左右箭头的自定义水平滚动菜单。

https://jsfiddle.net/c5grnve6/

当页面中只有一个滚动菜单时，它可以正常工作。如果我使用两个菜单，就会出现问题。

01) 当单击向右或向左箭头时，两个菜单箭头都会移动。

02) 右箭头到达终点时不会隐藏。

所以我尝试复制这段代码并使用不同的类名，但没有成功。

if (menuPosition <= paddleMargin) {
    $(leftPaddle).addClass('hidden');
    $(rightPaddle).removeClass('hidden');
} else if (menuPosition < menuEndOffset) {
    // show both paddles in the middle
    $(leftPaddle).removeClass('hidden');
    $(rightPaddle).removeClass('hidden');
} else if (menuPosition >= menuEndOffset) {
    $(leftPaddle).removeClass('hidden');
    $(rightPaddle).addClass('hidden');

}

我怎样才能实现这个目标？

Answer 1

01) 当单击向右或向左箭头时，两个菜单箭头都会移动。它发生是因为你写了:

// scroll to left
$(rightPaddle).on('click', function() {
    $('.menu').animate( { scrollLeft: menuInvisibleSize}, scrollDuration);
});

// scroll to right
$(leftPaddle).on('click', function() {
    $('.menu').animate( { scrollLeft: '0' }, scrollDuration);
});

这里 rightPaddle 和 leftPaddle 抓取了 rightPaddle 和 leftPaddle ，然后通过 '.menu' 两个菜单都在移动。您需要给它们单独的 id，以便可以单独调用它们。