Firefox下调用.jpictura()格式化图片时页面滚顶的原因及解决方法

我在HTML里用jpictura插件格式化图片，每次新增图片后重新调用.jpictura()函数时，只有Firefox会把页面自动滚到顶部，其他浏览器都正常。我试过下面这段代码想保留滚动位置，但在Firefox里完全没用：

function formatImages() {
  var currentPosition = $('html').offset().top;
  $("#imageResults").jpictura(); // Formats the images
  window.scrollTo(currentPosition);
}

原因分析 #

这个问题大概率是Firefox的DOM处理特性和jpictura插件的行为共同导致的：

• jpictura在重新初始化时，可能会移除旧的图片容器节点、重新生成DOM结构，Firefox在处理这类批量DOM变更时，会默认将页面滚动位置重置到顶部（其他浏览器的DOM渲染引擎在这一点上的处理逻辑不同，所以没触发问题）。
• 另一种可能是插件内部有隐性的scrollTop设为0的逻辑，这个逻辑在Firefox中被触发了，但在其他浏览器里没有生效。

另外你之前用$('html').offset().top获取滚动位置本身就有问题——在Firefox中，页面的滚动行为是绑定在body上的，而html的offset().top始终是0，所以你记录的位置根本不对，这也是代码无效的核心原因之一。

解决方法 #

1. 修正滚动位置记录方式+延迟执行滚动 #

用$(window).scrollTop()获取真实的滚动位置，再用setTimeout确保jpictura的DOM操作全部完成后再重置滚动位置：

function formatImages() {
  // 用window的scrollTop获取当前滚动位置，跨浏览器更可靠
  var currentPosition = $(window).scrollTop();
  $("#imageResults").jpictura(); // 格式化图片
  // 延迟0ms执行，确保DOM更新完成后再滚动
  setTimeout(function() {
    $(window).scrollTop(currentPosition);
  }, 0);
}

setTimeout的作用是把滚动操作放到浏览器事件队列的末尾，等jpictura的所有DOM修改都完成后再执行，避免DOM还没更新完就滚动导致的失效。

2. 检查插件配置，从根源禁用滚顶 #

去查jpictura的官方文档，看看有没有类似preserveScroll或者preventAutoScroll的配置项，初始化时传入这个配置就能直接阻止插件触发滚顶行为，比如：

$("#imageResults").jpictura({
  preserveScrollPosition: true // 具体配置名以插件文档为准
});

3. 临时锁定页面滚动 #

如果插件内部确实有强制滚顶的逻辑，你可以在执行jpictura前后临时锁定页面滚动，完成后再恢复位置：

function formatImages() {
  var currentPosition = $(window).scrollTop();
  // 临时禁止页面滚动
  $('body').css('overflow', 'hidden');
  $("#imageResults").jpictura();
  // 重置滚动位置
  $(window).scrollTop(currentPosition);
  // 恢复页面滚动
  $('body').css('overflow', 'auto');
}

内容的提问来源于stack exchange，提问作者Pat Pistachio