使用javascript＆amp;隐藏文字行不完全可见; CSS

Question

我认为这可能是不可能的，但是当用户滚动直到整条线可见时，是否有某种方法可以使用JQuery来阻止不完全可见的文本行显示在屏幕上？也就是说，我们希望阻止这样的事情出现：

谢谢！

Answer 1

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

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

Answer 2

我不知道那里有什么东西可以做到。但我认为它会引起更多混乱，它会使任何视觉增强。向下滚动时用户不会感到高兴，并且突然发现线条只是“弹出”，与滚动动作正常缓和相反。

毕竟，当我们谈到滚动条可见的可滚动HTML元素时，用户意识到文本可能部分显示，这是正常的，需要向下滚动才能读取剩余的内容。我真的不会这么推荐。

但是对于技术答案，我认为您需要修复该滚动元素的CSS line-height属性，比如make it 8px或者适合您的布局。然后，捕获scroll事件并通过CSS line-height分配jQuery scrollTop（），然后检查结果：如果它有一个分数，则表示存在“部分可见”行。不要忘记在计算时可能导致错误的边距和填充。

Answer 3

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

考虑到这一点，我会根据div中文本的行高调整div。

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

（我和rahmanisback'回答的同时发布了这个）

Answer 4

假设你可以测量文本区域的高度，测量线条的高度，找到滚动位置做一些数学，然后有一些方法来隐藏尚未完全暴露的文本（例如，使用x高度的白色div取决于在你的数学上）。然而，去寻找通常没有问题的东西似乎很麻烦。您也可以使用overflow属性执行某些操作，但是您可能会遇到一些我不确定的问题。

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