Question

我们在我们的应用程序中转换了一个页面，该页面先前将各种页面中的内容呈现为一个页面，该页面使用Javascript平滑地滚动到每个部分。

除非刷新页面，否则该功能不起作用。我认为这与缓存页面的turbolink有关。

在整个

中启用转换缓存

Turbolinks.enableTransitionCache()

平滑滚动功能

$(function() {
  $('.scroll-button').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 160
        }, 1000);
        return false;
      }
    }
  });
});

我尝试以各种方式选择退出turbolink并过渡缓存，最近通过使用data-no-turbolink="true"标记每个链接，页面容器和目标部分

example_links.html.slim中的每个链接都已被标记里 = link_to＆＃39; INFO＆＃39;，路径，类：＆＃39; tab-link滚动按钮＆＃39; data-no-turbolink＆＃39; =＆gt;＆＃39; true＆＃ 39;

show.html.slim标记了页面容器

.row data-no-transition-cache="true" data-no-turbolink="true"

标记了该网页上的每个部分

p.section-heading#someLabel data-no-turbolink="true"

如何通过点击链接或使用后退按钮确保访问页面时强制执行平滑滚动功能？

Answer 1

Turbolinks会发出事件，允许您跟踪导航生命周期并响应页面加载。

替换

$(function() {

带

$(document).on('turbolinks:load', function() {

前者是在DOM完全加载时执行的事件侦听器的简写。当turbolinks呈现页面时，不会发出该事件（除了点击硬刷新时，即按下F5）。

有关turbolinks事件的更多信息，请参阅https://github.com/turbolinks/turbolinks#full-list-of-events

Answer 2

如果启用了Turbolinks（即您已包含turbolinks.js），则需要像$('.scroll-button').click(...)这样的javascript事件进行重写：

$(document).on('click', '.scroll-button', function() {
  ...
});

Turbolinks会更改您应用的行为，仅加载您的javascript一次，并在加载新网页时更改<body>。因此，事件应附加到$(document)，这在页面加载之间不会发生变化

除非页面刷新，否则平滑滚动在Rails中不起作用

2 个答案: