javascript - 移动设备中带箭头的水平菜单栏

Question

我正在尝试使用这个 fiddle 开发带有箭头的移动菜单。

Jsfillde

但是有一个问题。当我添加更多列表项并按向右箭头时，它将转到列表末尾。所以我们看不到中间的 li 元素。

我只想通过在中间显示左、右箭头并缓慢向左或向右移动来查看中间项目。

我尝试添加此代码..

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

您可以更改滚动量，因此每次单击时，它不会滚动整个宽度，而是仅滚动一定数量的像素。要尝试此操作，您只需替换:

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

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

像这样:

var scrollAmount = 0;

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

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