当浏览器添加滚动条时，内容会水平跳转 [英] Content jumps horizontally whenever browser adds a scrollbar

问题描述

我使用固定宽度的正文和自动页边距将内容置于页面中间。当内容超过页面的高度并且浏览器添加一个滚动条时，自动边距会强制内容跳到滚动条左侧的一半宽度。

比较outerHeight和窗口.innerHeight解决这个问题的适当方法？是否有另一种方法来解决这个问题？

我认为这应该是足够的信息的问题，但让我知道如果我可以回答其他任何事情。 b
$ b

编辑说明：我不想强制滚动条出现。

解决方案

我会在这里留下这个链接，因为它对我来说似乎是一个优雅的解决方案：

https://aykevl.nl/2014/09/fix-跳跃滚动条

他所做的是添加此CSS：

  @media screen and（min-width：960px）{
 html {
 margin-left：calc（100vw  -  100％）; 
 margin-right：0; 
} 
} 
  

这会将内容向左移动的滚动条，所以当它出现的内容已经移动。这适用于 overflow：auto; 应用于 html 标记的居中内容。媒体查询会禁用手机，因为它非常明显地区分了边距宽度。

你可以在这里看到一个例子：

http://codepen.io/anon/pen/NPgbKP

I'm using a fixed width body and auto margins to center my content in the middle of the page. When the content exceeds the page's height and the browser adds a scrollbar, the auto margins force the content to jump half the width of the scrollbar left.

Is comparing outerHeight with window.innerHeight an appropriate way of solving this? Is there another way to solve this?

I think this should be enough info for the problem, but let me know if I can answer anything else.

Edit for clarification: I don't want to force the scrollbar to appear.

解决方案

I'll just leave this link here because it seems an elegant solution to me:

https://aykevl.nl/2014/09/fix-jumping-scrollbar

What he does is add this css:

@media screen and (min-width: 960px) {
    html {
        margin-left: calc(100vw - 100%);
        margin-right: 0;
    }
}

This will move the content to the left just the size of the scrollbar, so when it appears the content is already moved. This works for centered content with overflow: auto; applied to the html tag. The media query disables this for mobile phones, as its very obvious the difference in margin widths.

You can see an example here:

http://codepen.io/anon/pen/NPgbKP

这篇关于当浏览器添加滚动条时，内容会水平跳转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！