Bootstrap 5多行水平滚动异常：滚动牵连导航面板

这是浏览器默认的**滚动链（scroll chaining）**行为导致的：当滚动元素到达滚动边界时，滚动事件会自动传递给父级容器，进而带动页面的导航面板一起滚动。

快速解决：CSS方案 #

给滚动容器添加overscroll-behavior-x: contain属性，直接限制滚动行为仅作用于当前容器，不会传递到父级。

修改后的CSS代码：

.horizontal-scrollable {
    overflow-x: auto;
    white-space: nowrap;
    overscroll-behavior-x: contain; /* 新增这行即可 */
}

兼容旧浏览器：JS方案 #

如果需要兼容不支持overscroll-behavior的旧浏览器（如IE），可以用JavaScript监听滚动事件，阻止边界处的滚动冒泡：

const scrollBox = document.querySelector('.horizontal-scrollable');
scrollBox.addEventListener('wheel', (e) => {
    const isLeftEdge = scrollBox.scrollLeft === 0;
    const isRightEdge = scrollBox.scrollLeft + scrollBox.clientWidth >= scrollBox.scrollWidth;

    // 滚动到左右边界时，阻止事件传递
    if ((isLeftEdge && e.deltaX > 0) || (isRightEdge && e.deltaX < 0)) {
        e.preventDefault();
        e.stopPropagation();
    }
});

完整示例代码 #

CSS

.horizontal-scrollable {
    overflow-x: auto;
    white-space: nowrap;
    overscroll-behavior-x: contain;
}

HTML

<div class="container horizontal-scrollable" style="border: 1px solid lime;">
    <div class="row flex-nowrap" style="border: 5px solid gold">
        <div class="col" style="border: 1px solid red;">Column</div>
        <div class="col" style="border: 1px solid red;">Column</div>
        <div class="col" style="border: 1px solid red;">Column</div>
        <div class="col" style="border: 1px solid red;">Column</div>
    </div>
    <div class="row flex-nowrap" style="border: 5px solid gold">
        <div class="col" style="border: 1px solid red;">Column</div>
        <div class="col" style="border: 1px solid red;">Column</div>
        <div class="col" style="border: 1px solid red;">Column</div>
        <div class="col" style="border: 1px solid red;">Column</div>
    </div>
    <div class="row flex-nowrap" style="border: 5px solid gold">
        <div class="col" style="border: 1px solid red;">Column</div>
        <div class="col" style="border: 1px solid red;">Column</div>
        <div class="col" style="border: 1px solid red;">Column</div>
        <div class="col" style="border: 1px solid red;">Column</div>
    </div>
</div>

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