Infinite Scroll 在滚动加载新内容时会自动修改浏览器地址栏 URL（如 /page/2），影响用户体验与 SEO。本文详解如何通过注释源码中 onPageLoadHistory 方法彻底禁用该行为，并提供安全集成方案。
infinite scroll 在滚动加载新内容时会自动修改浏览器地址栏 url（如 `/page/2`），影响用户体验与 seo。本文详解如何通过注释源码中 `onpageloadhistory` 方法彻底禁用该行为，并提供安全集成方案。
Infinite Scroll 是一款广受欢迎的 JavaScript 插件，常用于 Tumblr、WordPress 等平台实现“无限下拉加载”效果。然而，默认配置会在每次加载新一页内容后，自动调用 history.pushState() 更新浏览器地址栏（例如从 example.tumblr.com 变为 example.tumblr.com/page/2）。这不仅可能干扰前端路由逻辑，还可能导致重复内容收录、SEO 权重分散，甚至在返回/刷新时出现状态不一致问题。
要彻底禁用该 URL 更新行为，关键在于屏蔽插件内部的 onPageLoadHistory 钩子函数。根据官方文档包（infinite-scroll-docs.zip）源码，该逻辑位于 第 1340–1343 行：
// update URL
proto.onPageLoadHistory = function( response, path ) {
this.setHistory( response.title, path );
};✅ 解决方案：
- 下载完整源码包：https://www.php.cn/link/c9c150c9178acb98b334f1fc13f9302d
- 解压后定位到
infinite-scroll.pkgd.js（或.min.js对应的未压缩版本） - 搜索
onPageLoadHistory，找到上述四行代码 -
整段注释掉（推荐使用
/* ... */包裹，避免语法错误）：
/*
proto.onPageLoadHistory = function( response, path ) {
this.setHistory( response.title, path );
};
*/- 保存文件，务必进行代码压缩（minify） 后再集成至主题（如使用 Terser 或在线工具）
- 替换原
<script></script>标签中的 CDN 或默认引用，改为指向你修改后的本地文件：
<script src="{ThemeDirectory}/js/infinite-scroll-custom.min.js"></script>
<script>
window.onload = function() {
var elem = document.getElementById('content');
let infScroll = new InfiniteScroll(elem, {
path: '.pagination__next',
append: '.post'
});
};
</script>⚠️ 重要注意事项：
- ❌ 不要直接在 HTML 中内联修改
infinite-scroll.pkgd.js的 CDN 版本——CDN 文件不可篡改； - ✅ 修改必须基于本地托管的副本，确保可控性与可维护性；
- ? 若使用构建工具（如 Webpack/Vite），建议将定制版 Infinite Scroll 封装为模块，便于版本管理和复用；
- ? 测试时请清空浏览器缓存，并在无痕窗口验证：滚动加载后地址栏应保持不变，且
Back按钮仍可正常返回上一页面（因 history 未被干预）。
通过以上步骤，你既能保留 Infinite Scroll 的核心加载能力，又能完全规避其侵入式 URL 更新机制，兼顾性能、体验与 SEO 合规性。
