为什么将 CSS class 添加到 HTML 页面元素会中断 Turbolinks 获取的页面上的滚动？

Question

我运行在涉及 Turbolinks 的 Rails 遗留项目中发现了一个非常有趣的错误。这是错误的描述：

每当用户单击汉堡包导航图标时，侧边导航就会动画化以打开要单击的导航链接列表。单击此图标后，jQuery 会将 class 添加到页面上的 html 元素。每当用户单击其中一个导航链接时，Turbolinks 就会执行 Turbolinks 所做的事情：向服务器发出 XHR 请求以获取页面所需的 HTML 并在响应中将页面的 body 标记换成 body 标记.但是，当 Turbolinks 从服务器绘制带有新 body 标签的页面时，访问者无法向下滚动页面——页面出现冻结状态。

当我删除 jQuery 并在单击导航时向 html 元素添加 CSS class 时，所有动画都提示相同。然后我点击其中一个链接 Turbolinks 运行，现在突然间页面解冻了——我可以上下滚动页面。

为什么原作者在汉堡包导航的点击事件中将CSS应用到html，我不知道。但是，当我删除此 jQuery 行为时，该行为将 CSS class 添加到 html 元素，Turbolinks 绘制的页面是可滚动的。

有谁知道为什么在 html 元素中添加 CSS class 会破坏 Turbolinks 获取和绘制的页面？有谁知道为什么当我删除 CSS class 到 html 元素的 jQuery 时，Turbolinks 绘制的页面是可滚动的？

编辑：

jQuery 添加到 html 元素的 CSS class 是这样的：

.-page-overflow-hidden {
  overflow: hidden;
}

Answer 1

这不是错误，这是在 Turbolinks 自述文件中指定的 https://github.com/turbolinks/turbolinks#navigating-with-turbolinks

During rendering, Turbolinks replaces the current body element outright and merges the contents of the head element. The JavaScript window and document objects, and the HTML html element, persist from one rendering to the next.

勾选粗体部分。 html 元素从一页持续到下一页，因此，应用于它的任何 class 都会持续存在。您的代码设置了 overflow: hidden CSS 属性，因此在新页面呈现后它仍然存在。

我建议在您的 js 文件中添加类似这样的内容

document.addEventListener('turbolinks:before-render', function(event) {
  document.getElementsByTagName('HTML')[0].classList.remove('-page-overflow-hidden');
})

这将监听 Turbolink 的 before-render 事件（在它开始呈现新页面后立即触发），您可以从第一个 HTML 元素中删除 class，就在如果已设置。

为什么将 CSS class 添加到 HTML 页面元素会中断 Turbolinks 获取的页面上的滚动？

Why does adding a CSS class to the HTML page element break scrolling on a page fetched by Turbolinks?

jquery

ruby-on-rails

turbolinks