Thursday, 8 August 2019

How to scroll to a specific index of text inside

tl;dr

How to scroll to a particular point in a web page given the index of text content residing on a single <div>? (No JQuerys!)

<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    ...
    Sed ut  <!-- Say I want to scroll to this point using the char index --> perspiciatis unde omnis iste natus error
</div>

The story

There are anchor links helping scroll to a specific section of a web page containing a quite long text like a complete lorem-ipsum passage. However they are immutable and determined with html tags: they are a part of the static markup.

The behavior I want to get is, on the other hand, making users of a web page individually mark the any point of text they desire, and when that user reloads or refreshes the page, it should scroll to the point s/he has bookmarked before.

Sure, inserting per-user anchors to page source is not desirable. I also do not have elements to match and jump to. If I were to think about keeping the line number user marks, well, it alters with the display size.

So, I pondered keeping the index of the text for the user, no other bright idea haunted me. Now, I wonder how is it possible with Vanilla JS.



from How to scroll to a specific index of text inside

No comments:

Post a Comment