求前端大佬解惑， HTML 里的文本怎么做逐行滚动？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 127 days ago, the information mentioned may be changed or developed.

有一个 div 里面有一些文本（ div 的大小不固定，文本的内容也不固定），如何实现文本的逐行滚动而不是逐像素滚动？我让 AI 帮我写了一个 demo ，这个 demo 在用鼠标滚轮的时候可以逐行滚动，但是有个问题，在这个 div 里面点鼠标中键，再往下移动鼠标（在 Windows 下这个行为会自动向下滚动），这个时候 div 会卡住，过了一会，整个 div 里的内容会滚动很大距离，这种情况怎么实现逐行滚动？

下面是 demo 代码： https://codepen.io/Asn-La/pen/RNbvYjY

滚动

文本

逐行

11 replies • 2025-02-05 13:58:21 +08:00

geelaw

127 days ago via iPhone

应该检查用户滚动结束才强制对齐，检查 wheel 是不必要的。标准 Web 做法是监听 scrollend 事件并作出处理，但 Safari 没有实现，为此可以在 Safari 上改成监听 scroll 事件并防抖（ debounce ），比如在发生 scroll 事件之后，第一次 100ms 内没有再发生 scroll 事件的时候执行代码（ requestAnimationFrame 通常会让代码极快执行，不适合此场景）。但是 scroll + debounce 也有不小的缺陷，比如 iOS 用户用手指滚动的时候，滚动途中稍作停留就会触发代码（通常认为手指离开屏幕才是滚动结束）。

我的建议是重新审视需求：为什么非要按行滚动？不完美按行滚动和完美自由（不按行）滚动，哪个更好？