自动滚动正常但手动滚动按钮失效，求助实现双功能共存

问题根源 #

1. 按钮点击事件未触发：HTML里的onclick属性只写了函数名（比如scrollLeft），没加括号()，点击时根本不会执行函数。
2. 按钮功能绑定颠倒：right按钮绑了向左滚动的函数，left按钮绑了向右滚动的函数，逻辑完全反了。
3. 自动滚动过于频繁：setInterval间隔设为10ms，每秒触发100次滚动，会直接干扰手动操作的平滑效果，甚至覆盖手动滚动动作。

修复方案 #

• 给按钮的onclick属性加函数调用括号，确保点击时执行对应函数
• 纠正按钮与滚动函数的绑定关系，让按钮功能符合直觉
• 新增手动操作时暂停自动滚动的逻辑，避免冲突；手动操作结束后延迟恢复自动滚动
• 调整自动滚动的间隔时间，降低触发频率，提升整体流畅度

完整修复代码 #

CSS（无改动）

.scrollbar {
    margin-top: 50px;
}

.scroll {
    width: 50px;
    height: 50px;
    outline: 1px solid black;
    cursor: pointer;
}

.adverts {
    white-space: nowrap;
    overflow: auto;
    width: 100%;
    height: 300px;
    background: grey;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    scrollbar-width: none;
    text-align: center;
}

.advert {
    margin-left: 10px;
    display: inline-block;
    width: 250px;
    height: 100%;
    background-color: white;
}

.advert .img {
    width: 90%;
    margin: 5%;
    height: 60%;
    outline: black 3px solid;
}

HTML（修正点击事件和绑定关系）

<div class="scrollbar">
    <div class="adverts">
        <a href="" class="advert w">
            <div class="img"></div>
        </a>
        <a href="" class="advert b"></a>
        <a href="" class="advert w"></a>
        <a href="" class="advert b"></a>
        <a href="" class="advert w"></a>
        <a href="" class="advert b"></a>
        <a href="" class="advert w"></a>
        <a href="" class="advert b"></a>
        <a href="" class="advert w"></a>
        <a href="" class="advert b"></a>
        <a href="" class="advert w"></a>
        <a href="" class="advert b"></a>
        <a href="" class="advert w"></a>
        <a href="" class="advert b"></a>
        <a href="" class="advert w"></a>
        <a href="" class="advert b"></a>
        <a href="" class="advert w"></a>
        <a href="" class="advert b"></a>
        <a href="" class="advert w"></a>
        <a href="" class="advert b"></a>
        <a href="" class="advert w"></a>
        <a href="" class="advert b"></a>
        <a href="" class="advert w"></a>
        <a href="" class="advert b"></a>
    </div>
</div>
<div class="scroll right" onclick="scrollRight()">right</div>
<div class="scroll left" onclick="scrollLeft()">left</div>

<script>
    const adverts = document.querySelector('.adverts');
    let autoScrollInterval;

    // 启动自动滚动
    function startAutoScroll() {
        autoScrollInterval = setInterval(() => {
            adverts.scrollBy({ left: 20, behavior: 'smooth' });
        }, 300); // 调整为300ms间隔，滚动更自然
    }

    // 停止自动滚动
    function stopAutoScroll() {
        clearInterval(autoScrollInterval);
    }

    // 手动向左滚动
    function scrollLeft() {
        stopAutoScroll();
        adverts.scrollBy({ left: -100, behavior: 'smooth' });
        // 手动操作后3秒恢复自动滚动
        setTimeout(startAutoScroll, 3000);
    }

    // 手动向右滚动
    function scrollRight() {
        stopAutoScroll();
        adverts.scrollBy({ left: 100, behavior: 'smooth' });
        setTimeout(startAutoScroll, 3000);
    }

    // 初始化自动滚动（延迟3秒启动）
    setTimeout(startAutoScroll, 3000);
</script>

额外说明 #

• 手动点击按钮会立即暂停自动滚动，避免两种滚动逻辑冲突
• 手动操作结束后3秒自动恢复滚动，兼顾自动播放和手动控制的需求
• 调整自动滚动间隔为300ms，既保证滚动流畅，又减少浏览器性能消耗

内容的提问来源于stack exchange，提问作者Alex i