Search code examples
javascriptviewscrollvisible

Get visible text of a div

I have a <div> with overflow:auto, variable height/width and some (longer) text in it (users can scroll down). What I want is to retrieve the first x characters of the currently visible first line of the div.

Graphically illustrated example: When the user clicks on the button below, the JavaScript function should return "convallis.". When the user scrolls down to the next line, it should return "mi aliquam".

Example

What I've tried so far: I've played around a bit with scrollTop() and scrollHeight() and read How to know what lines / chars are currently visible in a textarea? and JavaScript - Visible Text of a DIV but none really answers my question.

Solution

  • Alright, I found a solution for this problem: There is a nice little jQuery plugin that does exactly what I was looking for: https://www.customd.com/articles/13/checking-if-an-element-is-visible-on-screen-using-jquery