仅为页面部分区域实现CSS Scroll Snapping全屏滚动吸附的问题

问题背景 #

需要给页面特定section实现全屏滚动吸附（full height snapping）效果，给每个section添加了data属性，用jQuery根据当前视口中的section给main父元素设置data-snap的true/false状态。jQuery逻辑本身正常，但添加CSS后出现三种异常：

• CSS规则已应用，但滚动吸附不生效
• 滚动吸附生效，但直接跳转到页面顶部/底部
• 页面滚动被锁定，无法滚动到第一个吸附点

核心限制：非吸附区块和吸附区块在同一个父容器里，PHP模板无法单独包裹吸附区块，需通过其他方式解决。

问题根源分析 #

原方案将吸附父容器（.articles）设置为100vh + overflow:auto，导致容器成为固定高度的局部滚动区域，与页面全局滚动产生冲突；同时视口判断逻辑会遍历所有section，只要有一个符合条件就修改main的data-snap，导致状态频繁切换，滚动行为混乱。

解决方案 #

调整思路，将body作为滚动吸附容器，通过动态给body添加/移除类来开启/关闭滚动吸附，同时优化视口判断逻辑，避免状态冲突。

修改后的JavaScript #

$.fn.isMajorInViewport = function() {
  const $el = $(this);
  const elTop = $el.offset().top;
  const elHeight = $el.outerHeight();
  const viewportTop = $(window).scrollTop();
  const viewportHeight = $(window).height();
  
  // 判断元素是否占据视口的主要部分（超过50%）
  const elVisibleTop = Math.max(elTop, viewportTop);
  const elVisibleBottom = Math.min(elTop + elHeight, viewportTop + viewportHeight);
  const visibleHeight = elVisibleBottom - elVisibleTop;
  return visibleHeight / elHeight > 0.5;
};

$(window).on('resize scroll', function() {
  let shouldSnap = false;
  // 遍历section，找到当前在视口中占比最高的那个
  $('section').each(function() {
    if ($(this).isMajorInViewport()) {
      shouldSnap = $(this).data('snap') === true;
      return false; // 找到后停止遍历
    }
  });
  
  // 给body添加/移除类，控制滚动吸附
  $('body').toggleClass('snap-active', shouldSnap);
});

修改后的CSS #

/* 非吸附区块保持正常高度 */
section[data-snap="false"] {
  height: 200vh;
}

/* 开启滚动吸附时，body作为容器 */
body.snap-active {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}

/* 吸附区块设置对齐规则 */
section[data-snap="true"] {
  height: 100vh;
  scroll-snap-align: center;
  border: 2px solid #888;
}

/* 基础样式 */
section, footer {
  display: flex;
  justify-content: center;
  align-items: center;
}

h2 {
  font-size: 20px;
}

.bg1 { background: #f6da78 }
.bg2 { background: #ffaa98 }
.bg3 { background: #00da78 }
.bg4 { background: #f60f78 }
.bg5 { background: #f6ffaa }

修改后的HTML（结构不变） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main>
  <div class="articles">
    <section data-snap="false" class="bg1">
      <h2>Section 1 False</h2>
    </section>
    <section data-snap="true" class="bg2">
      <h2>Section 2 True</h2>
    </section>
    <section data-snap="true" class="bg3">
      <h2>Section 3 True</h2>
    </section>
    <section data-snap="true" class="bg4">
      <h2>Section 4 True</h2>
    </section>
    <section data-snap="true" class="bg5">
      <h2>Section 5 True</h2>
    </section>
  </div>
</main>
<footer>
  <h2>SOME FOOTER AREA</h2>
</footer>

关键改进点 #

• 将滚动吸附容器从局部的.articles换成全局的body，避免局部滚动与全局滚动的冲突
• 优化视口判断逻辑，仅针对当前占据视口超过50%的section切换状态，避免频繁触发状态变更
• 通过body类切换滚动吸附状态，逻辑更清晰，避免父元素data属性的覆盖问题
• 非吸附区块保持原有高度，不受父容器固定高度限制

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