本文详解如何在 Tumblr 网站中使用 Infinite Scroll 时，阻止其在无限滚动过程中自动修改浏览器地址栏 URL（如 /page/2、/page/3），通过注释源码中关键方法实现无痕加载。
本文详解如何在 tumblr 网站中使用 infinite scroll 时，阻止其在无限滚动过程中自动修改浏览器地址栏 url（如 `/page/2`、`/page/3`），通过注释源码中关键方法实现无痕加载。
Infinite Scroll 是一款广受欢迎的 JavaScript 库，常用于实现“滚动到底部自动加载更多内容”的交互体验。然而，在 Tumblr 等静态博客平台中集成时，一个常见副作用是：每当新一页内容加载完成，插件会自动调用 history.pushState() 更新当前 URL（例如从 example.tumblr.com 变为 example.tumblr.com/page/2）。这不仅影响用户体验（用户刷新页面可能跳转到中间页），还可能干扰 Tumblr 原生分页逻辑或 SEO 行为。
该行为由 Infinite Scroll 内置的 onPageLoadHistory 方法触发，其默认实现在官方文档包的源码中（非 CDN 版本）：
// update URL
proto.onPageLoadHistory = function( response, path ) {
this.setHistory( response.title, path );
};✅ 解决方案：
- 访问 infinite-scroll.com 下载完整源码包（推荐 ZIP 包：https://www.php.cn/link/c4c4cf5a99342d78ebcda40e91fc9fbfinfinite-scroll-docs.zip）；
- 解压后定位至
infinite-scroll.pkgd.js（或未压缩版），搜索onPageLoadHistory，找到上述约第 1340–1343 行代码； - 将整段函数体注释掉（保留函数声明但清空逻辑），例如：
// update URL
proto.onPageLoadHistory = function( response, path ) {
// this.setHistory( response.title, path ); // ← 已禁用 URL 更新
};- 保存文件，并务必进行代码压缩（minify）（可使用 Terser 或在线工具），避免因体积过大拖慢加载；
- 将修改后的 JS 文件上传至你的 Tumblr 主题资源（如 via
Custom CSS/JS编辑器或托管在 CDN），并在中引用（替换原 CDN 链接）：
<script src="{Your-Hosted-infinite-scroll.min.js}"></script>⚠️ 注意事项：
- 不要直接在
<script></script>标签内内联修改——Infinite Scroll 是类库，需修改其源码并重新发布； - 若使用 CDN（如
unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js），无法动态禁用该行为，必须自托管； - 禁用 URL 更新后，浏览器前进/后退按钮将不再切换分页状态（符合“无限滚动”设计初衷），如需支持 PWA 式路由，请自行扩展
onLoad回调实现 history 控制； - Tumblr 的
{block:NextPage}结构仍需保留，确保.pagination__next元素存在且指向正确路径，否则加载将失败。
通过以上调整，你即可获得真正“静默”的无限滚动体验：内容持续加载，URL 保持不变，结构更简洁，兼容性更强。
