Question:
I need to figure out a way to insert a chunk of HTML after the begin tag of the body element without causing the HTML that is in view to be scrolled to make space for the new HTML to be inserted.
I am implementing a “Line Up” function, and part of the process is to insert more content (if it is available) if the user has already scrolled through all the content in the page. So let’s say that the user is at the top of page 3. When the user performs a “line up” operation I want to display the bottom of page 2. But all I can do is display all of page 2 because the insertAdjacentHTML method inserts the HTML and pushes down page 3. Any help would be appreciated.
Answer:
One possibility that I can think of off the top of my head would be to do the following:
- Insert an anchor tag into the beginning of the text block on page 3 before inserting the “new page”
- Perform the insertAdjacentHTML method
- Call window.tempLoc.scrollIntoView()
- Then call window.tempLoc.outerHTML=””
By retaining the position via a placeholder, you’ll move back to that position once the page repaints. The final call wipes out the tempLoc span so that you can use it again. It isn’t necessarily the most elegant way, but it’s worked for me in similar situations.
