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

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

举报· 1041 次点击
登录 注册 站外分享
9 条回复  
geelaw 小成 2025-1-30 03:25:25
应该检查用户滚动结束才强制对齐,检查 wheel 是不必要的。标准 Web 做法是监听 scrollend 事件并作出处理,但 Safari 没有实现,为此可以在 Safari 上改成监听 scroll 事件并防抖( debounce ),比如在发生 scroll 事件之后,第一次 100ms 内没有再发生 scroll 事件的时候执行代码( requestAnimationFrame 通常会让代码极快执行,不适合此场景)。但是 scroll + debounce 也有不小的缺陷,比如 iOS 用户用手指滚动的时候,滚动途中稍作停留就会触发代码(通常认为手指离开屏幕才是滚动结束)。 我的建议是重新审视需求:为什么非要按行滚动?不完美按行滚动 和 完美自由(不按行)滚动,哪个更好?
rocmax 小成 2025-1-30 08:55:23
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_scroll_snap/Basic_concepts 滚动吸附可行吗?
geelaw 小成 2025-1-30 09:24:44
@rocmax #2 吸附的目标是元素的框,不是行。 当然,可以每个元素恰好容纳一行,但首先分割位置会受到字体的影响,其次将失去两端对齐的可能,并且还会导致障碍( reduce accessibility )。
fgwmlhdkkkw 小成 2025-1-30 10:10:08
https://stackoverflow.com/a/46537799/6683474 这样行吗?
importmeta 初学 2025-1-30 10:25:26
一点点启发,用纯 CSS 都能实现滚动 我之前见过, 可惜没收藏.
rocmax 小成 2025-1-30 12:34:17
@geelaw 可以用容器大小和行高算出行数,在容器内生成一些不可见元素作为锚点
mumbler 小成 2025-1-30 16:43:20
不用自己研究,直接用自然语言让 cursor 帮你实现就行了
realJamespond 小成 2025-1-30 17:08:12
写个定时器对齐?
Aolose 初学 2025-1-30 19:04:34
snap 当然可以实现! https://codepen.io/aolose/full/YPKgPPr https://i.imgur.com/5rhgCbo.png
返回顶部