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

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

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