I have a webpage with a large scrollable textarea element, which contains several pages of text. How can I identify which lines of that text are currently on display using JavaScript?
I can use scrollTop to find out approximately how far the user has scrolled through the textarea, but that doesn’t allow me to identify exactly the text on display because the text at the top frequently has line wrapping, whereas the text at the bottom does not (so if scrollTop is 50% of scrollHeight, the text is less than 50% of the way through the lines of text).
Background: The textarea, on the left of the screen, contains text in a markup language. A display area, on the right of the screen, shows the data as html-formatted text. When I scroll through the marked up text in the textarea on the left, I want the html-formatted display area to scroll in sync. However because of formatting differences I cannot just use the scrollTop and scrollHeight.
Any suggestions? I’m looking for a solution in HTML, JavaScript and/or CSS. Thanks.
2
Answers