视差WordPress主题标签仅在Google Chrome中不起作用

我有一个使用视差主题的网站, 但一段时间未更新, 但是没有子主题, 因此无法更新主题本身。

在最新版本的Chrome中, JavaScript /导航栏选项卡不执行预期的视差操作/滚动。

我认为这可能是对Chrome及其解释JavaScript的更改, 并且我已经能够在Chrome 73.0.3683.75版(正式版)(64位)上重现这些问题。

该网站为http://www.aircomfortcomplete.com/-如果有人遇到此问题或知道Chrome为什么会误解该代码, 我将非常感谢你的帮助。在将模板修改重写为子主题之前, 这是我需要做的快速修复方法。

基本上, 我只是不想在我使用适当的子主题时排斥所有的Chrome用户。

感谢你的宝贵时间和帮助！ =)

-亚历山大

#1

似乎主题使用的是旧版本或jquery.nav.js和SmoothScroll.js jQuery, 它在最新的Google Chrome浏览器中造成了问题, 因此请从下面的仓库中更新这两个CSS, 然后在你的设置中正常使用。

档案位置：

/wp-content/themes/accesspress-parallax/js/SmoothScroll.js

/wp-content/themes/accesspress-parallax/js/jquery.nav.js

最新的jQuery：

https://github.com/gblazex/smoothscroll-for-websites/blob/master/SmoothScroll.js https://github.com/davist11/jQuery-One-Page-Nav/blob/master/jquery.nav.js

#2

首先, 你只能更新jquery以查看问题是否仍然存在。如果是这样, 我将使用以下快速修复方法：

.css文件：

html {
  scroll-behavior: smooth;
}

在html中, 我会注释掉(禁用)你的平滑滚动插件。保持链接不变, 只需确保未调用preventDefault即可。

<li>
  <a href="http://aircomfortcomplete.com/#section-355">Promos</a>
</li>

<section class="parallax-section clearfix default_template" id="section-355">

  ...

</section>

编辑：我了解你想知道哪种特定的JavaScript方法是错误的。但是我的猜测是, 有些方法的行为不正确, 你无法通过替换来解决问题。我的建议是使用上面提供的快速修复

#3

如果你在开发控制台中查看, 你会看到错误消息来自SmoothScroll.js。 Chrome浏览器对滚动事件监听器进行了限制, 除非专门将滚动监听器称为非被动监听器。

你需要更新事件监听器, 使其具有{passive：false}选项, 以便Chrome浏览器遵守方法中的event.preventDefault()。有关该方法的更多信息, 请参见https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener。

通过扫描代码, 我认为要更新的行是SmoothScroll.js的435行上的辅助函数addEvent。也许像下面这样？

function addEvent(type, fn, bubble) {
    window.addEventListener(type, fn, {passive: false, capture: (bubble||false)});
}