Question

有时需要在页面访问之间保持滚动位置。

Turbolinks在加载数据后重置滚动位置。

如何针对特定元素禁用它？

Answer 1

使用以下javascript来保存滚动条。我创建了一个选择器，它匹配所有带有类turbolinks-disable-scroll的元素。在加载之前，脚本会保存滚动位置，加载后会加载保存的位置。

// persist scrolls
// pirated from https://github.com/turbolinks/turbolinks-classic/issues/205
var elementsWithPersistentScrolls, persistentScrollsPositions;

elementsWithPersistentScrolls = ['.turbolinks-disable-scroll'];

persistentScrollsPositions = {};

$(document).on('turbolinks:before-visit', function() {
    var i, len, results, selector;
    persistentScrollsPositions = {};
    results = [];
    for (i = 0, len = elementsWithPersistentScrolls.length; i < len; i++) {
        selector = elementsWithPersistentScrolls[i];
        results.push(persistentScrollsPositions[selector] = $(selector).scrollTop());
    }
    return results;
});

$(document).on('turbolinks:load', function() {
    var results, scrollTop, selector;
    results = [];
    for (selector in persistentScrollsPositions) {
        scrollTop = persistentScrollsPositions[selector];
        results.push($(selector).scrollTop(scrollTop));
    }
    return results;
});

Answer 2

我在ES6中的解决方案：

package

并在您要保留滚动条位置的链接上添加链接const turbolinksPersistScroll = () => { const persistScrollDataAttribute = 'turbolinks-persist-scroll' let scrollPosition = null let enabled = false document.addEventListener('turbolinks:before-visit', (event) => { if (enabled) scrollPosition = window.scrollY else scrollPosition = null enabled = false }) document.addEventListener('turbolinks:load', (event) => { const elements = document.querySelectorAll(`[data-${persistScrollDataAttribute}="true"]`) for (let i = 0; i < elements.length; i++) { elements[i].addEventListener('click', () => { enabled = true }) } if (scrollPosition) window.scrollTo(0, scrollPosition) }) } turbolinksPersistScroll()。

data-turbolinks-persist-scroll=true

这对我也有用，<a href="..." data-turbolinks-persist-scroll=true>Link</a>也适用。

Answer 3

这个问题似乎有两种方法。

保留已标记的元素（@ vedant1811的答案）
保留标记链接的正文滚动

第二种方法是我一直在寻找的，在任何地方找不到的方法，所以我会在这里提供我的答案。

这里的解决方案与第一种方法的解决方案非常相似，但也许更简单一些。想法是在单击元素时获取正文的当前滚动位置，然后在页面加载后滚动到该位置：

的Javascript

Turbolinks.scroll = {}

$(document).on('click', '[data-turbolinks-scroll=false]', function(e){
  Turbolinks.scroll['top'] = $('body').scrollTop();
})

$(document).on('page:load', function() {
  if (Turbolinks.scroll['top']) {
    $('body').scrollTop(Turbolinks.scroll['top']);
  }
  Turbolinks.scroll = {};
});

标记

<a href='/' data-turbolinks-scroll='false'>Scroll preserving link</a>

我在scroll对象上使用Turbolinks属性来存储我在单击[data-turbolinks-scroll=false]链接时的滚动位置，然后在我滚动页面后清除此属性。

清除属性（Turbolinks.scroll = {}）非常重要，否则后续点击未标记的锚链接将继续滚动到同一位置。

注意：，具体取决于您可能需要使用两者的滚动偏移量的特定styling of html and body。如何实现这一目标的一个例子是：

Turbolinks.scroll = {};

$(document).on('click', '[data-turbolinks-scroll=false]', function (e) {
    Turbolinks.scroll['top'] = {
        html: $("html").scrollTop(),
        body: $("body").scrollTop()
    }
});

$(document).on('turbolinks:load', function() {
    if (Turbolinks.scroll['top']) {
        $('html').scrollTop(Turbolinks.scroll['top']['html']);
        $('body').scrollTop(Turbolinks.scroll['top']['body']);
    }
    Turbolinks.scroll = {};
});

Answer 4

我注意到有时滚动会先上升然后再下降。此版本可防止此类行为：

TestSubject

如何坚持使用turbolinks滚动？

4 个答案:

的Javascript

标记