当刷新页面滚动到底部时,Chrome垂直跳转

Question

在使用Chrome开发网站时注意到以下行为:当我将页面完全滚动到底部时刷新页面时,我可以观察到垂直跳转.

请参阅以下Bootply.

要重现,请打开全屏预览(右侧的监视器图标),然后尝试以下操作:

1. 刷新页面(确认表单重新提交) - >没有跳转
2. 滚动到中间,刷新(确认表单重新提交) - >没有跳转
3. 滚动到最底部,刷新(确认表格重新提交) - >垂直跳转

跳转实际上是由这个Javascript引起的,当页面包含带有.align-center类的数字时,它试图保持垂直节奏:

$(document).ready(function() {
  $(window).resize(function() {
    var baseline = parseInt($('body').css('line-height'), 10)
    $('.align-center').each(function() {
      var height = $(this).outerHeight();
      console.log(height)
      var bottom = baseline - (height % baseline);

      if (bottom != 0)
      {
        bottom += parseInt($(this).css('padding-bottom'), 10)
        $(this).css('padding-bottom', bottom);
      }
    });
  }).trigger("resize");
});

当然,删除此Javascript也会删除观察到的垂直跳转.我不明白的是,当DOM准备就绪时应用填充,因此它不应导致可见的垂直跳跃.我认为当页面滚动到最底层时,跳转与Chrome处理视口的方式有关,但我真的不知道如何确认/确认这一点.

在Firefox或Safari中尝试此操作时,我没有观察到任何跳跃.

有什么好主意吗？

---

编辑:我在Chrome的错误跟踪器上打开了一个错误.

Answer 1

我没有完整的答案，但有一些关于 Chrome 的观察：

1. 浏览器可以在文档就绪事件之前开始绘制文档
2. 浏览器可以在文档就绪事件之前显示垂直滚动条
3. 浏览器可以滚动到文档就绪事件之前之前可见的内容
4. 窗口加载后浏览器可以滚动到之前可见的内容

您的代码似乎在文档就绪事件中向图形添加了 20px 填充。所以后果如下：

滚动到顶部或中间 + 刷新：

浏览器将刷新前可见的相同内容滚动到视图中。主体高度的增加不会影响滚动位置，只是滚动条会改变其高度。

滚动到底部+刷新：

如果可能的话，浏览器会尝试将正文与底部对齐。似乎做了两次⁺。当内容可用时，正文会一直滚动到底部。然后在文档准备好时将 20px 添加到正文高度，从而激活“向下滚动”按钮。页面加载时，浏览器再次将正文与底部对齐，将所有内容向下推 20 像素，从而创建“垂直跳转”行为。

⁺为了测试我添加了$(window).scroll(function() { console.log(arguments); }). 滚动事件触发两次：文档读取后和窗口加载后。

总之：

Chrome 似乎会将正文与页面底部对齐（如果在页面刷新之前就是这样的话）。而且它会过早地在页面加载后执行此操作，从而导致跳跃效果。

Firefox 似乎也遵循同样的步骤。然而，Firefox 似乎智能地处理了滚动到底部的情况。由于主体与底部对齐，因此它使视口上方区域的布局发生变化（由填充触发）；增加滚动条的高度但不滚动。