CSS局部滚动吸附（Partial Scroll Snapping）：如何实现子元素选择性滚动吸附？

我完全理解你的困扰——原生滚动吸附确实省去了大量JS代码，但要实现「部分元素吸附、部分自由滚动」的需求，在Safari里确实会遇到兼容性坑。

问题根源 #

你遇到的核心问题来自两个点：

1. 当容器设置scroll-snap-type: y mandatory时，浏览器会强制滚动结束时停在最近的吸附元素上，哪怕当前滚动位置在scroll-snap-align: none的元素区域内，它也会自动拉回最近的吸附点，这是mandatory的原生特性。
2. 虽然scroll-snap-type: y proximity本应只在滚动靠近吸附点时触发吸附，但Safari（包括iOS和OSX版本）对proximity的实现有偏差，依然会出现强制吸附的情况。

解决方案：动态切换滚动吸附规则 #

我们可以用JavaScript监听滚动位置，动态切换容器的scroll-snap-type属性：当滚动到自由滚动的元素区域时，关闭容器的吸附特性；当滚动到需要吸附的元素区域时，重新开启强制吸附。这样既保留了原生吸附的流畅性，又解决了Safari的兼容性问题。

修改后的完整代码

html { background: #f2f2f2; }
.scroll-container, .scroll-area-none, .scroll-area { max-width: 850px; height: 600px; font-size: 60px; }
.scroll-area-none { background-color: black; }
.scroll-container { overflow: auto; scroll-snap-type: y mandatory; }
.scroll-area { scroll-snap-align: start; }
.scroll-container, .scroll-area-none, .scroll-area { margin: 0 auto; }
.scroll-area-none, .scroll-area { display: flex; align-items: center; justify-content: center; color: white; }
.scroll-area:nth-of-type(4n+1) { background: #49b293; }
.scroll-area:nth-of-type(4n+2) { background: #c94e4b; }
.scroll-area:nth-of-type(4n+3) { background: #4cc1be; }
.scroll-area:nth-of-type(4n+4) { background: #8360A6; }

<div class="support-scrollsnap"></div>
<div class="scroll-container">
  <div class="scroll-area-none">-1</div>
  <div class="scroll-area-none">0</div>
  <div class="scroll-area">1</div>
  <div class="scroll-area">2</div>
  <div class="scroll-area">3</div>
  <div class="scroll-area">4</div>
  <div class="scroll-area-none">5</div>
  <div class="scroll-area-none">6</div>
</div>

const scrollContainer = document.querySelector('.scroll-container');
const noneAreas = document.querySelectorAll('.scroll-area-none');

// 预计算所有自由滚动区域的上下边界
const noneRanges = Array.from(noneAreas).map(el => {
  const rect = el.getBoundingClientRect();
  const top = rect.top + scrollContainer.scrollTop;
  return {
    top,
    bottom: top + rect.height
  };
});

// 监听滚动事件，动态切换吸附规则
const updateSnapType = () => {
  const scrollTop = scrollContainer.scrollTop;
  // 判断当前滚动位置是否在自由滚动区域内
  const isInNoneArea = noneRanges.some(range => {
    return scrollTop >= range.top && scrollTop <= range.bottom;
  });
  // 切换容器的scroll-snap-type
  scrollContainer.style.scrollSnapType = isInNoneArea ? 'none' : 'y mandatory';
};

// 初始化时检查一次
updateSnapType();
// 监听滚动事件
scrollContainer.addEventListener('scroll', updateSnapType);

方案说明 #

• 当滚动到-1、0、5、6这些自由区域时，容器的scroll-snap-type会被设为none，此时滚动可以自由停止在任意位置。
• 当滚动到中间的吸附区域时，容器会恢复y mandatory规则，确保滚动结束时自动吸附到对应元素。
• 这个方案只在必要时切换吸附规则，不会影响原生滚动的流畅性，同时完美解决了Safari的兼容性问题。

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