Scroll position of data-turbolinks-permanent elements lost on navigation. #661

jtokoph · 2016-02-02T07:36:42Z

Elements with data-turbolinks-permanent and a style of overflow: scroll are losing scroll position when navigation/replacement occurs.

Example html that can be dropped into any turbolinks page.

<div id="test-container" style="height: 100px; overflow: scroll;" data-turbolinks-permanent>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
</div>

Load page.
Scroll the container a bit.
Visit another page.

You'll see that the content is properly preserved, but the scroll position is not.

This could be a reason to bring back something like #583. My use case would work if I could do something like this:

<body>
   <div data-turbolinks-root>
    part of page that is replaced by turbolinks
   </div>
  <div class="some-permanent-element-that-overflow-scrolls">
    part of page that turbolinks doesn't touch
  </div>
</body>

I have a chat widget on the page that should maintain it's scroll position to the bottom where the latest messages are.

The text was updated successfully, but these errors were encountered:

jtokoph · 2016-02-02T08:03:02Z

I should mention that my current workaround is to listen to page:before-unload and save scroll positions. Then on page:update restoring those scroll positions. Would be nice if I didn't have to do that for each scroll view though.

Jelkster · 2016-02-13T03:03:40Z

I've been trying for the last 2 days to try and get turbolinks to persist elements. What's the secret? Elements I annotate with the data-turbolinks-permanent are not persisting. I copied your html and when I clicked on a link, it disappeared, even though the network tab shows it was loaded via turbolinks. I've tried v3 and v5 to no avail.

saetia · 2016-05-12T22:52:44Z

this will work if you don't want to worry about permanent

var scrollLeft = 0;
//restore the menu position
$(document).on('page:change', function() {
  $('.menu').scrollLeft(scrollLeft);
});
//before the current page goes away, save the menu position
$(document).on('page:before-unload', function() {
  scrollLeft = $('.menu').scrollLeft();
});

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Scroll position of data-turbolinks-permanent elements lost on navigation. #661

Scroll position of data-turbolinks-permanent elements lost on navigation. #661

jtokoph commented Feb 2, 2016

jtokoph commented Feb 2, 2016

Jelkster commented Feb 13, 2016

saetia commented May 12, 2016

Scroll position of data-turbolinks-permanent elements lost on navigation. #661

Scroll position of data-turbolinks-permanent elements lost on navigation. #661

Comments

jtokoph commented Feb 2, 2016

jtokoph commented Feb 2, 2016

Jelkster commented Feb 13, 2016

saetia commented May 12, 2016