🏠 back to Observable

scroll position should not change when earlier cells render

Right now if I make an anchor link to halfway down some long notebook, there’s a good chance that visitors will be viewing the wrong place, because many cells take a few seconds to evaluate, but the scroll position is set pretty soon after page load. When cells above the section I linked to finally finish evaluating, the scroll position (counted in pixels from the top of the page?) does not change, but the desired position has moved down.

Maybe there’s a way to add some logic to re-scroll the page when cells change height up above the current scroll position?

Or maybe cells could start with a precomputed expected height while they are waiting to render for the first time? (The expected height depends a bit on view width, so it’s not trivial to implement, but I think it should be possible.)

3 Likes

One way to do this would be to update the scroll position every time a cell evaluates, until the user manually scrolls the page. This would keep the scroll position correct while making sure the page doesn’t jump back up as the user starts scrolling.

Actually, a better solution might be to scroll the page by the amount the cell has changed in height each time a render occurs if:

  • the entire cell is above the top of the viewport, or:
  • the change will cause the bottom of the cell to move from somewhere within the viewport to somewhere outside of it.

This would account for both the case where cells above the current cell are loading and the case where you break a cell, causing a large visualization to collapse, snatching the broken code out of the viewport.

2 Likes