当滚动条可见时，停止浏览器调整网站大小 [英] Stop browser from resizing website when scrollbar is visible

问题描述

在Windows中，当滚动条可见时，它会改变网站的宽度，并使其显示为跳跃，但在Mac OSX中，滚动条只是悬停在网站上，不会改变任何尺寸。

有没有办法强制Windows中的滚动条操作相同？

解决方案

我不相信你可以导致滚动条覆盖网站，但你可以强制它总是可见的设置（ demo ）：

  body {
 overflow-y：scroll; 
} 
  

这是假设它是你的body元素需要滚动，将其设置在表示可滚动视口的元素上。

更多 overflow-y from MDN

overflow-y CSS属性指定是否剪辑内容，渲染
a滚动条，或者显示块级元素的溢出内容，
当它在顶部和底部边缘溢出时

内容被剪辑，桌面浏览器使用滚动条，
无论是否剪切任何内容。 这样可避免在动态环境中出现和消失的
滚动条出现任何问题。
打印机可能打印溢出的内容。

In Windows, when the scrollbar is visible it changes the width of the website and makes it appear to 'jump', yet in Mac OSX the scrollbar simply hovers over the website and doesn't change any sizing.

Is there any way to force the scrollbar in Windows to act the same?

解决方案

I don't believe you can cause the scrollbar to overlay the site, but you can force it to always be visible by setting (demo):

body{
   overflow-y:scroll;
}

This is on the assumption it is your body element that requires scrolling, alternatively simply set it on the element representing the scrollable viewport.

More on overflow-y from MDN

The overflow-y CSS property specifies whether to clip content, render a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges.

scroll The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. Printers may print overflowing content.

这篇关于当滚动条可见时，停止浏览器调整网站大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！