WebKit内核滚动幅度过大，如何调整滚动步长？

要解决鼠标滚轮滚动幅度过大、文本易移出视野的问题，你可以通过以下方式自定义滚动步长：

方法一：JavaScript 控制滚动步长 #

通过监听滚轮事件，阻止默认滚动行为，按照自定义幅度控制容器滚动：

修改 HTML 模板 #

给滚动容器添加唯一标识，方便获取元素：

<div 
   class="value"  
  *ngIf="courseData.sub_title"
  id="custom-scroll-container"
> {{courseData.sub_title}}
</div>

添加 JavaScript 逻辑 #

如果是 Angular 项目，可将代码放在组件的 ngAfterViewInit 钩子中：

const scrollContainer = document.getElementById('custom-scroll-container');
if (scrollContainer) {
  scrollContainer.addEventListener('wheel', (e) => {
    e.preventDefault();
    // 自定义滚动步长，示例为每次滚动15px，可按需调整
    const step = 15;
    scrollContainer.scrollTop += e.deltaY > 0 ? step : -step;
  });
}

说明 #

• e.deltaY 用于判断滚动方向：正值代表向下滚动，负值代表向上滚动
• 步长数值可根据容器高度、字体大小调整，比如容器行高为24px时，可将步长设为24px，让滚动对齐文本行

方法二：配合 CSS 行高优化体验 #

如果文本是多行布局，可设置容器行高与滚动步长匹配，让滚动更贴合文本：

.value {
  max-height: 60px;
  overflow-y: auto;
  color: black;
  font-size: 16px;
  line-height: 1.5; /* 对应24px行高，可匹配24px的滚动步长 */
}

/* 保留你原有的滚动条样式 */
.value::-webkit-scrollbar {
  width: 3px;
}
.value::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgb(163, 163, 163);
  border-radius: 5px;
}
.value::-webkit-scrollbar-thumb {
  background: linear-gradient(60deg, #b95aca, #8c15ad);
  border-radius: 5px;
}

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