移动端底部横向滚动div实现固定步长滚动，避免按钮半屏显示

当然可以实现，目前有两种靠谱的方案，优先用CSS原生属性就能搞定，兼容性好还简单。

一、CSS原生滚动吸附方案（推荐） #

这是移动端最常用的实现方式，利用scroll-snap系列属性实现自动吸附，完全不需要JS干预。

实现步骤： #

• 给底部的滚动容器设置以下样式：

  .scroll-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-x: auto;
    display: flex;
    gap: 8px; /* 按钮间的间距 */
    scroll-snap-type: x mandatory; /* 强制横向滚动吸附 */
    scroll-behavior: smooth; /* 可选，开启平滑滚动效果 */
    padding: 10px;
    background: #fff;
    border-top: 1px solid #eee;
  }
  

• 给每个按钮设置固定宽度和吸附对齐规则：

  .scroll-btn {
    flex: 0 0 120px; /* 固定宽度，不随容器伸缩 */
    height: 44px;
    scroll-snap-align: start; /* 吸附到按钮左边缘，确保按钮完整显示 */
    border: none;
    border-radius: 8px;
    background: #f5f5f5;
    cursor: pointer;
  }
  

• 对应的HTML结构：

  <div class="scroll-container">
    <button class="scroll-btn">按钮1</button>
    <button class="scroll-btn">按钮2</button>
    <button class="scroll-btn">按钮3</button>
    <button class="scroll-btn">按钮4</button>
    <button class="scroll-btn">按钮5</button>
    <button class="scroll-btn">按钮6</button>
  </div>
  

设置完成后，滚动容器时会自动吸附到最近的按钮位置，绝不会出现按钮半显示的情况。

二、JavaScript辅助方案（兼容旧浏览器） #

如果需要兼容不支持scroll-snap的旧版浏览器，可以用JS监听滚动事件，手动计算并定位到完整按钮的位置。

实现思路： #

1. 获取所有按钮的左偏移量，存储为数组。
2. 监听容器的scroll事件，计算当前滚动距离。
3. 找到与当前滚动距离最接近的按钮偏移量，调用scrollTo方法滚动到该位置。

示例代码： #

const container = document.querySelector('.scroll-container');
const btns = document.querySelectorAll('.scroll-btn');
const btnOffsets = Array.from(btns).map(btn => btn.offsetLeft);

container.addEventListener('scroll', () => {
  const currentScroll = container.scrollLeft;
  // 找到最近的按钮偏移量
  const closestOffset = btnOffsets.reduce((prev, curr) => {
    return Math.abs(curr - currentScroll) < Math.abs(prev - currentScroll) ? curr : prev;
  });
  // 临时关闭平滑滚动避免冲突
  container.style.scrollBehavior = 'auto';
  container.scrollTo({ left: closestOffset });
  // 恢复平滑滚动（如果需要）
  setTimeout(() => {
    container.style.scrollBehavior = 'smooth';
  }, 0);
});

两种方案都能实现你要的固定步长滚动、按钮完整显示的效果，优先用CSS方案，代码更少性能更好。

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