Get visible lines (with respect to current scroll)

1

Is it possible to get range of lines currently visible in the browser?

After some research I merely found method getViewport(), which returns, as I understand, the line range which are currently rendered in the DOM, but since CM generally renders several (default 10, configurable) lines before/after current visible lines, it’s not what I am trying to find.

I would like to find lines, which are visible to the user (I don’t care what is in DOM, I care about the lines that are visible with respect to current scroll).

I could implement the feature myself, if elements with class CodeMirror-line bore the information of the line number (I want the solution independent on line number gutters). If CM does not provide API for the visible lines, can I modify line rendering via a plugin to include that information?

Thank you!

2

You don’t need to add information to the DOM. Do something like this:

    var rect = editor.getWrapperElement().getBoundingClientRect();
    var topVisibleLine = editor.lineAtHeight(rect.top, "window");
    var bottomVisibleLine = editor.lineAtHeight(rect.bottom, "window");
2 Likes
3

This is beautiful! I must have missed the lineAtHeight method. Thank you :smiley_cat: