隱藏文字行不完全可見與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屬性做一些事情，但是你可能會遇到一些我不確定的問題。

我想到了一個更容易實現的替代方法。捕獲滾動​​事件，然後將其更改爲最接近的行高的倍數。