search

turbolinks / turbolinks-classic

Classic version of Turbolinks. Now deprecated in favor of Turbolinks 5.
MIT License
3.54k stars 428 forks source link

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

Open jtokoph opened 8 years ago

jtokoph commented 8 years ago

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>
  1. Load page.
  2. Scroll the container a bit.
  3. 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.

jtokoph commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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();
});