基于jQuery和CSS的水平滚动页面优化问题求助

我正在制作一个水平滚动页面，需要实现鼠标向下滚动页面向右、向上滚动页面向左的效果。目前已完成基础功能，但存在两个核心问题：

• 滚动过程不够流畅
• 滚动到section-5末尾时会超出内容范围继续滚动，回到section-1开头时会卡住，必须向下滚动才能恢复

希望实现流畅的水平滚动效果。

现有代码 #

HTML #

<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>

CSS #

section {
    height: 100vh;
    padding-left: 125px;
    display: inline-block;
    z-index: 2;
    overflow: visible;
    white-space: nowrap;
}

.scroll-sections {
    padding: 0;
    list-style: none;
    font-size: 0;
    margin: 0;
    white-space: nowrap;
    height: 100%;
    position: relative;
    overflow: visible;
}

初始jQuery代码 #

$(document).ready(function(){
  var pos = 0;
  $(".scroll-sections").bind('mousewheel DOMMouseScroll', function(event) {
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
      pos = pos + 50;
    } else {
      pos = pos - 50;
    }
    $(".scroll-sections").css({left: pos});
    return false;
  });
});

代码更新（仅优化流畅度） #

调整步长后滚动稍流畅，但边界问题仍存在：

$(document).ready(function(){
  var pos = 0;
  $(".scroll-sections").bind('mousewheel DOMMouseScroll', function(event) {
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
      pos = pos + 10;
    } else {
      pos = pos - 10;
    }
    $(".scroll-sections").css({left: pos});
    return false;
  });
});

解决方案 #

1. 流畅滚动 + 边界限制实现 #

通过计算内容总宽度与视口宽度确定滚动边界，使用animate替代直接修改CSS实现平滑过渡：

$(document).ready(function(){
  const $container = $(".scroll-sections");
  const containerTotalWidth = $container[0].scrollWidth;
  const viewportWidth = $(window).width();
  // 计算最大向左偏移量（滚动到最右侧时的left值）
  const maxLeftOffset = viewportWidth - containerTotalWidth;
  let currentPos = 0;

  $container.bind('mousewheel DOMMouseScroll', function(event) {
    event.preventDefault();
    
    // 统一滚轮方向判断
    const delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
    // 计算目标位置，步长可根据需求调整
    let targetPos = currentPos + (delta > 0 ? 120 : -120);
    
    // 边界限制：不能超过最左侧（0）和最右侧（maxLeftOffset）
    targetPos = Math.max(maxLeftOffset, Math.min(0, targetPos));
    
    // 平滑滚动，动画时长可调整
    $container.stop().animate({ left: targetPos }, 120);
    currentPos = targetPos;
  });
});

2. CSS优化 #

修正布局细节，确保每个section占满视口并隐藏超出内容：

section {
    height: 100vh;
    padding-left: 125px;
    display: inline-block;
    z-index: 2;
    white-space: nowrap;
    /* 确保section宽度占满视口 */
    width: 100vw;
    box-sizing: border-box;
}

.scroll-sections {
    padding: 0;
    margin: 0;
    white-space: nowrap;
    height: 100vh;
    position: relative;
    /* 隐藏超出视口的内容 */
    overflow: hidden;
}

关键改进点 #

• 边界控制：通过scrollWidth计算内容总宽度，限制滚动范围避免超出边界
• 平滑滚动：使用animate实现自然过渡，替代生硬的CSS值修改
• 事件兼容：统一不同浏览器的滚轮事件判断逻辑
• 布局修正：设置section宽度为100vw，确保每个区块占满视口

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