如何降低可滚动年份列表的滚动速度，实现逐年份定位？

要实现年份列表的精准滚动（每次滚动定位单个年份）并降低滚动速度，可以结合CSS滚动捕捉（scroll-snap）和JavaScript滚轮事件拦截来实现，以下是具体方案：

一、核心思路 #

1. 用CSS scroll-snap强制滚动时自动对齐到单个年份项，确保定位精准；
2. 通过JS拦截原生滚轮事件，控制滚动步长为单个年份项的高度，避免快速滚动跳过多个选项。

二、代码修改实现 #

1. CSS调整（关键修改） #

给年份容器和每个年份项添加滚动捕捉相关样式，同时统一每个年份项的高度，保证滚动步长一致：

.scrollable-year {
  position: relative;
}

.years-list {
  width: 284px;
  height: 115px;
  list-style-type: none;
  padding: 45px 20px;
  border: 1px solid red;
  background-color: #f2f5f6;
  overflow-y: auto;
  /* 添加滚动捕捉配置 */
  scroll-snap-type: y mandatory;
  /* 取消默认滚动惯性 */
  overscroll-behavior-y: contain;
}

.year {
  font-size: 16px;
  border-top: 1px solid #eee; /* 可选，添加分隔线更清晰 */
  /* 统一高度，确保滚动步长一致 */
  height: 30px;
  line-height: 30px;
  /* 设置滚动捕捉对齐方式 */
  scroll-snap-align: center;
}

::-webkit-scrollbar {
  width: 0;
}

.gradientTop,
.gradientBottom {
  width: 284px;
  height: 45px;
  position: absolute;
}

.gradientTop {
  background: linear-gradient(
    180deg,
    #fff 56.56%,
    rgba(255, 255, 255, 0.59) 83.65%,
    rgba(255, 255, 255, 0.7) 86.25%,
    rgba(255, 255, 255, 0) 99.98%,
    rgba(226, 226, 226, 0.24) 99.99%
  );
  box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.25);
}

.gradientBottom {
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0.01%,
    rgba(255, 255, 255, 0.2) 1.09%,
    #fff 46.74%
  );
  box-shadow: 0px -0.5px 0px 0px rgba(0, 0, 0, 0.25);
}

2. JavaScript调整（拦截滚轮事件） #

添加滚轮事件监听，阻止默认滚动行为，手动控制每次滚动一个年份项的高度：

let currentYear = new Date().getFullYear();
let startYear = 2013;
const yearContainer = document.querySelector(".years-list");
// 获取单个年份项的高度
const yearItemHeight = document.querySelector(".year")?.offsetHeight || 30;

// 生成年份列表
for (let i = startYear; i <= currentYear; i++) {
  const node = document.createElement("li");
  const textnode = document.createTextNode(i);
  node.classList.add("year");
  node.appendChild(textnode);
  yearContainer.appendChild(node);
}

// 拦截滚轮事件，控制滚动步长
yearContainer.addEventListener('wheel', (e) => {
  e.preventDefault();
  // 根据滚轮方向计算滚动距离，负数是向上滚动，正数向下
  const scrollDirection = e.deltaY > 0 ? 1 : -1;
  // 每次滚动一个年份项的高度
  yearContainer.scrollTop += scrollDirection * yearItemHeight;
}, { passive: false });

三、效果说明 #

• 滚动时会自动对齐到单个年份，不会出现半个年份的情况；
• 每次滚轮滚动只会移动一个年份的距离，彻底降低滚动速度，实现精准选择；
• overscroll-behavior-y: contain 可以避免滚动到容器边缘时触发页面整体滚动。

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