Added remember scroll progress feature #159
Conversation
I added an onscroll event which stores in LocalStorage the current scrollY relatively to the last chapter header. But before this it gets the stored current chapter and relative scroll and scrolls to the required position after scroolling to the required chapter. It may not be the best solution, but it's at least something. This feature is a must! This contribution was made in my free time.
|
Hey Adelin, and thank you for your contribution! The chapters of a book are loaded in chunks of 10+1. I haven't tested your solution but I don't think it will work if the last read chapter will be greater than 11 since the other chapters are not loaded into the DOM and thus the scroll position would not have a valid value. I would suggest to save the chapterId instead into the local storage and we could have an additional button on the book overview page which says "Continue reading" which leads the user to the last read chapter. About saving the progress into either the local storage or the database - this is a total different topic .. but we could also start with the LS and see how often the "Continue reading" feature is used and change it to save it in the database if the users are interested in using multiple devices and keep the save progress. I also think this functionality would be very beneficial, so thank you again for your initiative! |
|
Hey. It already saves the chapter. The code works like this: The first time you open a book, on any chapter you want, and that chapter is loaded, the afterInitialize function is called. If that local storage entry exists, I call changeChapter to update the current chapter and scroll to it's header (that function includes scrollToChapter) and then I scroll a bit further based on the stored progress value. To save the current scroll progress I made an on scroll event which fires every time a user scrolls and to avoid excessive processing I made a timeout which makes the actual processing to take place only if the user has stopped scrolling for 200 ms. For identifying the current scroll progress relative to the current chapter, I list all the chapter-header elements currently visible on the page and I filter for the one that contains text starting with the current chapter id (I split that innerText by spaces and take the first element and check if it is the same as this.chapterId). Then I get the relative scroll by subtracting the current scroll position by the current chapter's header position. Lastly I save the current chapter id and relative scroll in local storage in an entity identified by the current book id. |
|
Short update: we've quickly tested the solution together and we've decided it's not yet ready to go on production. |
I added an onscroll event which stores in LocalStorage the current scrollY relatively to the last chapter header. But before this it gets the stored current chapter and relative scroll and scrolls to the required position after scroolling to the required chapter.
It may not be the best solution, but it's at least something. This feature is a must!
This contribution was made in my free time.