隐藏文字行不完全可见与JavaScript＆css

Question

我认为这可能是不可能的，但有没有什么方法使用JQuery，以防止行显示在屏幕上时，用户滚动，直到整行是可见的？也就是说，我们要防止这样的事情，从显示出来：

谢谢！

Answer 1

我同意@rahmanisback，不要惹恼用户的浏览体验。

然而，什么可能是一个很好的“inbetween”解决方案，是使用透明度渐变，使底部像素淡出。但是这也适用于“整体”线条，所以也许这不是解决您的问题的好办法。

Answer 2

我不知道是否有什么东西可以做到这一点。但我认为这会让人产生混淆，因为它会使视觉增强。用户在向下滚动时不会感到高兴，并且发现线路突然“弹出”，与正常情况下由于滚动动作而缓解相反。毕竟，当我们谈论滚动条可见的可滚动HTML元素时，用户知道的文本可能会部分显示，这是正常的，需要向下滚动才能阅读剩余的文本。我真的不会推荐。

但是对于技术性答案，我认为您需要修复该滚动元素的CSS line-height属性，比如使其为8px或任何适合您的布局的元素。然后，捕获滚动事件，并通过该CSS行高来设置jQuery scrollTop（），然后检查结果：如果它有一个分数，那么这意味着有一个“部分可见”行。不要忘记计算时可能会导致错误的余量和填充。

Answer 3

我相信我也有这个问题，因为你有一个具有特定高度和溢出的div隐藏。

想一想，我会根据div中文本的行高来调整div的大小。

更改div的高度，使其等于包含文本的行高度的倍数.... 即3行文本与行高= 16将div高度从50更改为48px。

（我张贴此在同一时间rahmanisback的回答）

Answer 4

可以想像，你可以测量文本区域的高度，测量线的高度，找到滚动位置做一些数学，然后有一些方法隐藏尚未完全暴露的文本（例如，根据数学使用x高度的白色div）。然而，对于那些通常不是问题的东西来说，似乎有很多麻烦。你也许可以用overflow属性做一些事情，但是你可能会遇到一些我不确定的问题。

我想到了一个更容易实现的替代方法。捕获滚动​​事件，然后将其更改为最接近的行高的倍数。