我有一个使用视差主题的网站, 但一段时间未更新, 但是没有子主题, 因此无法更新主题本身。
在最新版本的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。
【视差WordPress主题标签仅在Google Chrome中不起作用】通过扫描代码, 我认为要更新的行是SmoothScroll.js的435行上的辅助函数addEvent。也许像下面这样?
function addEvent(type, fn, bubble) {
window.addEventListener(type, fn, {passive: false, capture: (bubble||false)});
}
推荐阅读
- 将变量传递到包含中的另一个变量可能吗()
- 主页上的分页WordPress
- 在WordPress中从头开始创建主题子文件夹中的页面模板
- WordPress中带有主题的Oxygen Builder
- Owl轮播-使用上一个/下一个跳过过去的图像
- 在子主题中覆盖父主题函数
- 智慧楼宇办公时代来啦!你准备好了吗()
- 一篇超详细的vue项目前端自动化测试教学!
- 认识Java项目开发效率工具 Lombok