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

【问题标题】：Why does adding a CSS class to the HTML page element break scrolling on a page fetched by Turbolinks?为什么向 HTML 页面元素添加 CSS 类会破坏 Turbolinks 获取的页面上的滚动？
【发布时间】：2018-09-14 17:54:01
【问题描述】：

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

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

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

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

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

编辑：

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

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

【问题讨论】：

查看项目的 CSS 文件并找到要添加的类，这应该会告诉您您需要知道的一切。
没有代码真的很难说。我认为这不是 Rails 和 Turbolinks 中的错误，您的 CSS 和 JS 文件肯定有其他问题。
@arieljuod 问题使用添加到 html 元素的 CSS 更新。

标签： jquery ruby-on-rails turbolinks

【解决方案1】：

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

在渲染期间，Turbolinks 直接替换当前的body 元素并合并head 元素的内容。 JavaScript 窗口和文档对象，以及 HTML html 元素，从一个呈现到下一个呈现持续存在。

检查粗体部分。 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 元素中删除该类，以防万一它被设置。

【讨论】：