CSS滚动吸附异常触发问题：原因分析与解决方案

问题复现步骤 #

• 聚焦顶部的输入框
• 滚动至页面底部，点击空白区域
• 页面会跳回顶部的滚动吸附目标

已发现的诱因 #

• 滚动窗口处于无邻近滚动吸附目标的区域
• 输入框在聚焦/失焦时宽度发生变化

演示代码核心逻辑 #

• 输入框聚焦/失焦时，为其容器元素添加/移除类名
• 该类名会修改容器的宽度
• 仅输入框容器设置了scroll-snap-align属性

成因解析 #

当设置了scroll-snap-align的元素（输入框容器）尺寸发生变化时，浏览器会触发布局重排，重新计算滚动容器内所有吸附目标的位置。如果此时滚动容器的可视区域处于没有邻近吸附目标的区域（比如页面底部），浏览器的滚动吸附机制会自动寻找最近的有效吸附目标进行对齐，最终导致页面跳回顶部的吸附目标。这种跳转并非由滚动操作触发，而是布局变化引发的滚动吸附重计算导致的。

解决方法 #

1. 固定吸附目标尺寸：给输入框容器设置固定宽度，或者通过min-width/max-width限制尺寸波动，避免聚焦/失焦时的宽度变化触发布局重排，从根源上阻止滚动吸附的意外触发。

   .input-container {
     width: 320px; /* 固定宽度 */
     scroll-snap-align: start;
   }
   

2. 补充底部吸附目标：在页面底部添加一个空的吸附元素，设置scroll-snap-align: end，确保滚动到页面底部时也有对应的吸附目标，让浏览器无需跳回顶部寻找。

   <div class="bottom-snap"></div>
   

   .bottom-snap {
     height: 0;
     scroll-snap-align: end;
   }
   

3. 临时禁用滚动吸附：通过JavaScript监听输入框的聚焦/失焦事件，在尺寸变化前移除滚动容器的scroll-snap-type属性，待尺寸调整完成后再重新添加，避免布局变化触发吸附计算。

   const input = document.querySelector('input');
   const scrollContainer = document.querySelector('.scroll-container');
   
   input.addEventListener('focus', () => {
     scrollContainer.style.scrollSnapType = 'none';
   });
   
   input.addEventListener('blur', () => {
     setTimeout(() => {
       scrollContainer.style.scrollSnapType = 'y mandatory';
     }, 100);
   });
   

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