V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
NQ
V2EX  ›  JavaScript

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

  •  
  •   NQ · 23 小时 28 分钟前 · 1410 次点击

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

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

    9 条回复    2025-01-30 19:04:34 +08:00
    geelaw
        1
    geelaw  
       21 小时 50 分钟前 via iPhone   ❤️ 1
    应该检查用户滚动结束才强制对齐,检查 wheel 是不必要的。标准 Web 做法是监听 scrollend 事件并作出处理,但 Safari 没有实现,为此可以在 Safari 上改成监听 scroll 事件并防抖( debounce ),比如在发生 scroll 事件之后,第一次 100ms 内没有再发生 scroll 事件的时候执行代码( requestAnimationFrame 通常会让代码极快执行,不适合此场景)。但是 scroll + debounce 也有不小的缺陷,比如 iOS 用户用手指滚动的时候,滚动途中稍作停留就会触发代码(通常认为手指离开屏幕才是滚动结束)。

    我的建议是重新审视需求:为什么非要按行滚动?不完美按行滚动 和 完美自由(不按行)滚动,哪个更好?
    rocmax
        2
    rocmax  
       16 小时 20 分钟前 via Android
    geelaw
        3
    geelaw  
       15 小时 50 分钟前 via iPhone
    @rocmax #2 吸附的目标是元素的框,不是行。

    当然,可以每个元素恰好容纳一行,但首先分割位置会受到字体的影响,其次将失去两端对齐的可能,并且还会导致障碍( reduce accessibility )。
    fgwmlhdkkkw
        4
    fgwmlhdkkkw  
       15 小时 5 分钟前 via Android
    importmeta
        5
    importmeta  
       14 小时 50 分钟前
    一点点启发,用纯 CSS 都能实现滚动 我之前见过, 可惜没收藏.
    rocmax
        6
    rocmax  
       12 小时 41 分钟前 via Android   ❤️ 1
    @geelaw 可以用容器大小和行高算出行数,在容器内生成一些不可见元素作为锚点
    mumbler
        7
    mumbler  
       8 小时 32 分钟前
    不用自己研究,直接用自然语言让 cursor 帮你实现就行了
    realJamespond
        8
    realJamespond  
       8 小时 7 分钟前
    写个定时器对齐?
    Aolose
        9
    Aolose  
       6 小时 11 分钟前   ❤️ 2
    snap 当然可以实现!
    https://codepen.io/aolose/full/YPKgPPr
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1009 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 19ms · UTC 17:15 · PVG 01:15 · LAX 09:15 · JFK 12:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.