jquery - 为什么向 HTML 页面元素添加 CSS 类会破坏 Turbolinks 获取的页面上的滚动？

Question

我在涉及 Turbolinks 的 Rails 遗留项目中遇到了一个非常有趣的错误。以下是该错误的描述:

每当用户单击汉堡包导航图标时，侧面导航就会以动画形式打开要单击的导航链接列表。单击此图标后，jQuery 会将一个类添加到页面上的 html 元素中。每当用户单击这些导航链接之一时，Turbolinks 就会执行 Turbolinks 所做的事情:向服务器发出 XHR 请求以获取页面所需的 HTML，并将页面的 body 标记替换为响应中的 body 标记。然而，当 Turbolinks 从服务器绘制带有新 body 标记的页面时，访问者无法向下滚动页面 - 页面似乎卡住了。

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

为什么原作者在汉堡导航上的点击事件期间将CSS应用到html，我不知道。然而，当我删除这个向 html 元素添加 CSS 类的 jQuery 行为时，Turbolinks 绘制的页面是可滚动的。

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

编辑:

jQuery 添加到 html 元素的 CSS 类是这样的:

.-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 元素从一页持续到下一页，因此，应用于它的任何类都会持续存在。您的代码设置了 overflow:hidden CSS 属性，因此在新页面呈现后它仍然存在。

我建议在你的 js 文件中添加类似的内容

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

它将监听 Turbolink 的 before-render 事件(该事件在开始渲染新页面后立即触发)，并且您可以从第一个 HTML 元素中删除该类，以防万一它被设置。