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