Hide lines of text not fully visible with javascript & css

Question

I think this may not be possible, but is there a way to use jQuery to prevent invisible lines of text from appearing on the screen when the user scrolls until the entire line is visible? That is, we want something like this not to appear:

Thanks!

Answer 1

I agree with @rahmanisback, I am not confused with user browsing experience.

However, which might be a good inbetween solution, it uses a transparency gradient to make the lower pixels disappear. But this also applies to "whole" lines, so perhaps this is not a good solution to your problem.

Answer 2

I do not know if there is anything for this. But I think this will lead to more confusion, that it will make any visual improvement ever. The user will not be happy when he scrolls down and discovers that the lines simply “pop up” suddenly, as opposed to the usual weakening as a result of the scroll action.

In the end, when we talk about a scrollable HTML element with visible scrollbars, the user's text may be partially shown, and that’s normal, and it needs to be scrolled down to read the rest. I would not recommend this.

But for a technical answer, I think you will need to fix the CSS line height property of this scroll element, say, make 8px or something suitable for your layout. Then grab the scroll event and split the jQueryTop () scroll by this CSS line height, and then check the results: if it has a beat, then there is a “partially visible” line. Do not forget the margin and indentation, which can cause calculation errors.

Answer 3

I believe that I had this problem too, because you have a div with a certain height and overflow.

Thinking about this, I would resize the div based on the height of the line of text in the div.

Change the height of the div so that it is equal to a multiple of the height of the line containing the text .... i.e. 3 lines of text with line height = 16 change the height of the div from 50 to 48 pixels.

(I posted this at the same time as rahmanisback answer)

Answer 4

Hypothetically, you can measure the height of the text area, measure the height of the line, find the scroll position, do some math, and then slightly hide the text that is not yet fully open (for example, using a white div with height x depending on your math). However, it seems that you have a lot of problems to go for something that is usually not a problem. You can also do something with the overflow property, but you may have some problems that I'm not sure about.

I thought of an alternative method that would be easier to implement. Grab the scroll events, and then change them to the nearest multiple of the row height.