jQuery与CSS实现平滑横向滚动：鼠标滚轮控制内容位移

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroll-sections">
    <section id="section-1">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1>Section 1</h1>
                </div>
            </div>
        </div>
    </section>
    <section id="section-2">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1>Section 2</h1>
                </div>
            </div>
        </div>
    </section>
    <section id="section-3">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1>Section 3</h1>
                </div>
            </div>
        </div>
    </section>
    <section id="section-4">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1>Section 4</h1>
                </div>
            </div>
        </div>
    </section>
    <section id="section-5">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1>Section 5</h1>
                </div>
            </div>
        </div>
    </section>
</div>

html, body{
    margin: 0px;
    overflow: hidden; /* 隐藏默认的滚动条 */
}
section {
    height: 99vh; /* 每个区块占据视口高度的99% */
    display: inline-block; /* 使区块水平排列 */
    width: 33.3%; /* 每个区块占据父容器宽度的1/3，意味着一次显示约3个区块 */
    border: 1px solid red; /* 方便调试的边框 */
    overflow: visible; /* 确保区块内容超出其自身边界时可见 */
}

.scroll-sections {
    white-space: nowrap; /* 防止内部的inline-block元素换行 */
    height: 100%; /* 占据父容器（body）的全部高度 */
    overflow: visible; /* 允许内容超出容器边界 */
    transition-duration: 0.5s; /* 设置CSS过渡动画时长，使滚动更平滑 */
}

$(document).ready(function(){
    var pos = 0; // 当前滚动位置，表示translateX的像素值
    var lastElement = $(".scroll-sections").children().last(); // 获取最后一个section元素
    // 计算最大滚动距离 (即最右侧的滚动边界)
    // 滚动容器的宽度 - (最后一个元素的左偏移量 + 最后一个元素的宽度)
    // 结果将是一个负值，表示scroll-sections需要向左移动的最大距离
    var maxScroll = $(".scroll-sections").width() - (lastElement.offset().left + lastElement.outerWidth());

    // 监听鼠标滚轮事件 (现代浏览器推荐使用'wheel'事件)
    $(".scroll-sections").on('wheel', function(event) {
        // 根据滚轮方向调整滚动位置
        // event.originalEvent.wheelDelta 通常在Chrome/Safari中是120或-120，Firefox使用event.originalEvent.detail
        // 此处使用wheelDelta/3来调整滚动速度
        pos = pos + (event.originalEvent.wheelDelta / 3);

        // 边界检查：防止内容滚动超出左侧边界 (pos不能大于0)
        if(pos > 0 ){
            pos = 0;
        } 
        // 边界检查：防止内容滚动超出右侧边界 (pos不能小于maxScroll)
        if(pos < maxScroll){
            pos = maxScroll;
        }

        // 应用CSS transform属性实现平滑位移
        $(".scroll-sections").css({'transform': 'translateX(' + pos + 'px)'});

        // 阻止默认的垂直滚动行为
        return false;
    });
});