点击左右按钮控制菜单横向滚动仅生效一次的问题如何解决

问题根源 #

当前代码仅能滚动一次的核心原因是左右按钮的滚动逻辑写为了固定值赋值，而非在当前已滚动距离的基础上叠加偏移量：

• 点击右按钮时直接设置scrollLeft: itemSize，不管当前滚动进度，每次都会停留在距离左侧1个item宽度的位置，第二次点击无位置变化
• 点击左按钮同理，固定赋值为负数，第一次滚动到最左侧后就不会再产生位移

修复方案 #

直接修改左右按钮的点击事件，使用jQuery animate支持的累加/累减语法即可，同时补充窗口resize时的不可见宽度计算逻辑，保证响应式场景下的显示正确性，修改后完整JS代码如下：

var scrollDuration = 450;
// 按钮元素获取
var leftPaddle = document.getElementsByClassName('left-paddle');
var rightPaddle = document.getElementsByClassName('right-paddle');
// 列表项尺寸计算
var itemsLength = $('.item').length;
var itemSize = $('.item').outerWidth(true);
var paddleMargin = 5;

// 获取容器宽度
var getMenuWrapperSize = function() {
    return $('.menu-wrapper').outerWidth();
}
var menuWrapperSize = getMenuWrapperSize();
var menuSize = itemsLength * itemSize;
var menuInvisibleSize = menuSize - menuWrapperSize;

// 窗口尺寸变化时重新计算参数
$(window).on('resize', function() {
    menuWrapperSize = getMenuWrapperSize();
    menuInvisibleSize = menuSize - menuWrapperSize;
});

// 获取当前滚动位置
var getMenuPosition = function() {
    return $('.menu').scrollLeft();
};

// 滚动时按钮显隐控制
$('.menu').on('scroll', function() {
    var menuPosition = getMenuPosition();
    var menuEndOffset = menuInvisibleSize - paddleMargin;

    if (menuPosition <= paddleMargin) {
        $(leftPaddle).addClass('hidden');
        $(rightPaddle).removeClass('hidden');
    } else if (menuPosition < menuEndOffset) {
        $(leftPaddle).removeClass('hidden');
        $(rightPaddle).removeClass('hidden');
    } else if (menuPosition >= menuEndOffset) {
        $(leftPaddle).removeClass('hidden');
        $(rightPaddle).addClass('hidden');
    }
});

// 右按钮滚动逻辑（修改后）
$(rightPaddle).on('click', function() {
    $('.menu').animate( { scrollLeft: "+=" + itemSize}, scrollDuration);
});

// 左按钮滚动逻辑（修改后）
$(leftPaddle).on('click', function() {
    $('.menu').animate( { scrollLeft: "-=" + itemSize }, scrollDuration);
});

修改后每次点击按钮都会在当前滚动位置基础上滚动一个列表项宽度，直到滚动到边界自动隐藏对应按钮，完全符合需求。

内容的提问来源于stack exchange，提问作者elias hayar