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

22 天前
NQ  NQ

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

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

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

我的建议是重新审视需求:为什么非要按行滚动?不完美按行滚动 和 完美自由(不按行)滚动,哪个更好?
rocmax
rocmax
22 天前
geelaw
geelaw
22 天前
@rocmax #2 吸附的目标是元素的框,不是行。

当然,可以每个元素恰好容纳一行,但首先分割位置会受到字体的影响,其次将失去两端对齐的可能,并且还会导致障碍( reduce accessibility )。
fgwmlhdkkkw
fgwmlhdkkkw
22 天前
importmeta
importmeta
22 天前
一点点启发,用纯 CSS 都能实现滚动 我之前见过, 可惜没收藏.
rocmax
rocmax
22 天前
@geelaw 可以用容器大小和行高算出行数,在容器内生成一些不可见元素作为锚点
mumbler
mumbler
22 天前
不用自己研究,直接用自然语言让 cursor 帮你实现就行了
realJamespond
realJamespond
22 天前
写个定时器对齐?
Aolose
Aolose
21 天前
snap 当然可以实现!
https://codepen.io/aolose/full/YPKgPPr
mostkia
mostkia
21 天前
看看效果,是不是你要的
https://jsfiddle.net/mvcwng2d/1/
zy0829
zy0829
16 天前
@Aolose 有点东西

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1108305

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX