刷新页面滚动到底部时，Chrome会垂直跳转 [英] Chrome vertical jump when refreshing page scrolled to bottom

问题描述

在使用Chrome开发网站时，注意到以下行为：当我在页面完全滚动至底部时刷新页面时，我可以观察到垂直跳跃。

请参阅以下 Bootply 。

重现后，打开全屏预览（右侧的显示器图标），然后尝试以下操作：

1. 刷新页面（确认表单重新提交） - >
   
2. 滚动到中间，刷新（确认表单重新提交） - >不跳转
   
3. 滚动到最底部，刷新（确认表单重新提交） - >垂直跳跃
   

跳转实际上是由这个JavaScript引起的，当页面包含数字时，试图保持垂直节奏 .align-center class：

  $（document）.ready（function ）{
 $（window）.resize（function（）{
 var baseline = parseInt（$（'body'）。css（'line-height ），10）
 $（）每个（函数（）{
变种高度= $（本）.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中尝试此操作时，我没有观察到任何跳跃。

有任何想法吗？

---

编辑：我开了一个bug Chrome的bug追踪器。

解决方案

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

1. 浏览器可以在文档就绪事件之前开始绘制文档


2. 浏览器可以在文档准备好事件之前显示垂直滚动条


3. 浏览器可以在文档准备就绪事件之前滚动到之前可见的内容


4. 浏览器可以在窗口加载后滚动到之前可见的内容。 $ b

您的代码似乎为t添加了20px的填充他认为文件准备好了。所以下面是结果：

滚动至顶部或中间位置刷新：

浏览器将相同的内容滚动到刷新前可见的视图中。滚动到底部+刷新：

>

在可能的情况下，浏览器尝试将主体与底部对齐。它似乎是两次 ⁺ 。内容可用时，主体一直滚动到底部。然后将20px添加到文档准备好的身体高度上，从而激活向下滚动按钮。在页面加载时，浏览器再次将主体与底部对齐，将所有内容向下推动20px，从而创建垂直跳转行为。

$ b

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

总结：

Chrome似乎如果页面刷新前是这样的，则将页面的底部与主体对齐。并且它在页面加载后引发了跳跃效果之前就已经完成了。

Firefox似乎也遵循相同的步骤。但是，Firefox似乎智能地处理了滚动到底部的情况。由于主体与底部对齐，因此会在视口上方的区域中进行布局更改（由填充触发）;增加滚动条的高度，但不滚动。

In noticed the following behavior when developing a website using Chrome: when I refresh the page while it's being scrolled fully to bottom I can observe a vertical jump.

See the following Bootply.

To reproduce, open the fullscreen preview (the monitor icon on the right), and try the following:

1. refresh the page (confirm form resubmission) --> no jump
2. scroll to middle, refresh (confirm form resubmission) --> no jump
3. scroll to very bottom, refresh (confirm form resubmission) --> vertical jump

The jump is in fact caused by this Javascript that tries to maintain vertical rhythm when page contains figures with .align-center class:

$(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");
});

Of course removing this Javascript also removes the vertical jump observed. What I don't understand is that padding is applied when DOM is ready so it shouldn't cause visible vertical jumps. I think the jump has to do with the way Chrome handles the viewport when page is scrolled to very bottom but I don't really know how to confirm/infirm this.

When trying this in Firefox or Safari, I don't observe any jump.

Any idea please?

---

Edit: I opened a bug on Chrome's bug tracker.

解决方案

I do not have a complete answer but some observations regarding Chrome:

1. Browser can start painting the document before document ready event
2. Browser can show vertical scrollbar before document ready event
3. Browser can scroll to the previously visible content before document ready event
4. Browser can scroll to the previously visible content after window load

Your code seems to add a 20px padding to the figure on document ready event. So here are the consequences:

Scroll to top or middle + Refresh:

The browser scrolls the same content into view that was visible before the refresh. The increase in body height does not affect the scroll position except that the scrollbar changes its height.

Scroll to bottom + Refresh:

The browser tries to align the body to the bottom when possible. It seems to do this twice⁺. The body is scrolled all the way to the bottom when the content is available. Then 20px is added to the body height on document ready which activates the "scroll down" button. On page load, the browser aligns the body with the bottom again, pushing all the content down by 20px which creates the "vertical jump" behavior.

⁺ For testing I added $(window).scroll(function() { console.log(arguments); }). The scroll event fired twice: after document read and after window load.

In summary:

Chrome seems to align the body with the bottom of the page if it was that way before page refresh. And it does so pre-maturely and after the page loads causing the jumping effect.

Firefox seems to follow the same steps. However, it seems like Firefox handles the scroll to bottom case intelligently. Since the body is aligned with the bottom, it makes the layout changes (triggered by padding) in the area above the viewport; increasing the height of scrollbar but not scrolling.

这篇关于刷新页面滚动到底部时，Chrome会垂直跳转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！