时间戳

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

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

问题描述

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

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

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

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

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

编辑：

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

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

标签： jqueryruby-on-railsturbolinks

解决方案

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

在渲染过程中，Turbolinks 直接替换当前body元素并合并元素的内容head。JavaScript 窗口和文档对象以及 HTMLhtml元素从一个渲染持续到下一个渲染。

检查粗体部分。该html元素从一页持续到下一页，因此，应用于它的任何类都将持续存在。您的代码设置了一个overflow: hiddenCSS 属性，因此在新页面呈现后它仍然存在。

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

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

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

推荐阅读