滚动条挤占内容宽度，影响布局

Posted 2023-04-30

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了滚动条挤占内容宽度，影响布局相关的知识，希望对你有一定的参考价值。

参考技术A

举个栗子:

没有滚动条的效果图：

上面为灰色是 container 灰色块， item 为里面的小方块，图为四个一排的列表，当 item 超过4个，就会超出父元素高度， container 就会产生滚动条。要求是灰色容易左右两边留白一样，中间子元素的间距相等。

未产生滚动条 container 容器的内容宽度是420px - 40px = 380px(父元素的宽度减去左右padding的宽度)。剩余的宽度 380px - 360px = 20px margin-right的值就为 calc(20px / 3)。
但是如果是产生滚动条，内容的宽度要再减去14px, 是366px。如果这样设置margin-right: calc(20px / 3)有滚动条的情况下，第四个元素会挤到第二排。所以 item 的样式margin-right不能给出固定的值。

解决1. 新属性overlay
chrome下overflow有个新的属性值overlay，这个属性简直就是为了这个问题而生，他和auto有点像，但是区别就是在触发滚动条时候并不挤压空间。但是非常遗憾，这个属性值目前只有chrome支持

看起来的效果像是在滚动条显示padding的空白里，没有挤压到内容区域。

有滚动条的效果:

解决2. 使用100%
设置100%指的是可用宽度，是不含滚动条的宽度,

这样子设置之后，在有滚动条和滚动条时，margin-right计算的值不同。
有滚动条的效果：

防止滚动条添加到 Chrome 上的页面宽度

【中文标题】防止滚动条添加到 Chrome 上的页面宽度【英文标题】：Prevent scroll-bar from adding-up to the Width of page on Chrome 【发布时间】：2013-09-04 02:26:19 【问题描述】：

我在尝试在 Chrome 上保持 .html 页面的宽度一致时遇到了一个小问题，例如，我有一个页面 (1)，其中有很多内容超出了视口的（正确的词？）高度，因此该页面 (1) 上有一个垂直滚动条。在第 (2) 页上，我有相同的布局（菜单、div 等），但内容较少，因此没有垂直滚动条。

问题在于，在第 (1) 页上，滚动条似乎将元素稍微向左推（加起来到宽度？），而所有内容都很好地集中在第 (2) 页上

我仍然是 HTML/CSS/JS 的初学者，我相当确信这并不难，但我没有找到解决方案的运气。它在 IE10 和 FireFox（无干扰滚动条）上确实可以正常工作，我只在 Chrome 上遇到过这种情况。

【问题讨论】：

这是一个非常烦人的问题，直到我切换到滚动条持续存在并占用屏幕不动产的 Windows 编码之前，我从未遇到过这个问题。 Mac 滚动条消失并且不增加宽度。 【参考方案1】：

免责声明：叠加层已弃用。如果绝对需要，您仍然可以使用它，但尽量不要。

这仅适用于 WebKit 浏览器，但我非常喜欢它。在其他浏览器上的行为类似于 auto。

.yourContent
   overflow-y: overlay;

这将使滚动条仅显示为叠加层，因此不会影响元素的宽度！

【讨论】：

它不适用于 IE11。是否有任何解决方法可以让覆盖值在 IE 中工作。据我所知，您将不得不使用此线程中针对 IE 提出的其他选项非常需要！我花了半个多小时才看到我的标记到底做错了什么。我过度使用了哪些风格？这也应该是默认的。但它已被弃用我更新了解决方案以反映这一点。有点伤心：P【参考方案2】：

你需要做的就是添加：

html 
    overflow-y: scroll;

在您的 css 文件中，因为无论是否需要滚动条，您都无法滚动

这意味着视口将具有相同的宽度

【讨论】：

那么，我有义务为两者添加滚动条吗？有没有办法忽略垂直滚动条的宽度？谢谢！我知道没有办法忽略它，但我所说的对@Rockr90 很有用 @d3c0y 这是真的，我在答案中提到了它，但它是最简单的方法。我不知道这在过去 3 年中是否发生了变化 @aks。它迫使浏览器认为您可以滚动，因此启用滚动条并且滚动 y 是侧滚动条溢出-y：滚动；即使没有可滚动元素，也会在所有视口中添加/显示滚动条。【参考方案3】：

大概

html 
    width: 100vw;

正是你想要的。

【讨论】：

这对我的用例非常有用：gist.github.com/bmcminn/1ab50da18bde75f39bc88e8292a5a847 我正在使用calc() 来确定主要内容视图的宽度，以便固定的屏幕外导航可以占据桌面屏幕的左侧，同时保留移动设备上的原生滚动。在过去的 36 小时里，我一直在搞乱我的滚动条。我有一些不同的解决方案有效，但提出了其他问题。这是第一个既可行又允许我在其他地方使用普通滚动条的解决方案。谢谢。这很好用，有人能解释一下它是如何工作的吗？嗯，它只是将根 HTML 节点 (<html>) 的宽度设置为 100 个 视口宽度单位。那是浏览器窗口的 100% 宽度。解决方案还不错，但可以添加水平滚动。【参考方案4】：

您可以获取滚动条大小，然后对容器应用边距。

类似这样的：

var checkScrollBars = function()
    var b = $('body');
    var normalw = 0;
    var scrollw = 0;
    if(b.prop('scrollHeight')>b.height())
        normalw = window.innerWidth;
        scrollw = normalw - b.width();
        $('#container').css(marginRight:'-'+scrollw+'px');

用于移除水平滚动条的 CSS：

body
    overflow-x:hidden;

试着看看这个： http://jsfiddle.net/NQAzt/

【讨论】：

聪明的解决方案，虽然我不明白'if'中的条件！ scrollHeight 是元素的总高度。你看到的和隐藏的。一个例子：您的窗口高度为 500px，body 的内容为 900px。显示了 500 像素，但隐藏了其他 400 像素，滚动条将出现以显示此剩余像素。所以条件就像“如果所有内容的高度大于视点高度，则将边距添加到正文”。对不起我的英语不好我在回复中添加了一小段css来防止它:) 此解决方案禁用滚动伙计，你用这段代码救了我，我已经浪费了 20 个小时试图弄清楚我应该做什么！谢谢哥们！【参考方案5】：

Safari 和 Chrome 等 Webkit 浏览器在计算宽度时从可见页面宽度中减去滚动条宽度：100% 或 100vw。更多信息请访问DM Rutherford's Scrolling and Page Width。

尝试改用overflow-y: overlay。

【讨论】：

请不要对多个问题发布相同的答案。发布一个好的答案，然后投票/标记以关闭其他问题作为重复问题。如果问题不是重复的，调整您对该问题的回答。 这应该可以，但是覆盖还不是标准的，也不是所有浏览器都支持。快速打嗝：在 Safari 中这会导致页面停止滚动【参考方案6】：

我发现我可以添加

::-webkit-scrollbar  
display: none;

直接到我的 css，它会使滚动条不可见，但仍然允许我滚动（至少在 Chrome 上）。当您不想在页面上出现分散注意力的滚动条时非常适合！

【讨论】：

虽然***.com/questions/9251354/… 这有点冒险，而且不是跨浏览器的解决方案【参考方案7】：

对于具有固定宽度的容器，纯 CSS 跨浏览器解决方案可以通过将容器包装到另一个 div 并将相同的宽度应用于两个 div 来完成。

#outer 
  overflow-y: auto;
  overflow-x: hidden;
  /*
   * width must be an absolute value otherwise the inner divs width must be set via
   * javascript to the computed width of the parent container
   */
  width: 200px;


#inner 
  width: inherit;

Click here to see an example on Codepen

【讨论】：

【参考方案8】：

body 
    width: calc( 100% );
    max-width: calc( 100vw - 1em );

也适用于默认滚动条。可以补充：

overflow-x: hidden;

确保水平滚动条对父框架保持隐藏。除非您的客户希望这样做。

【讨论】：

【参考方案9】：

目前我的其他答案似乎不太正确（但我会继续尝试使其正常运行）。

但基本上你需要做的，以及它试图动态做的，是将内容的宽度设置为略小于父级可滚动窗格的宽度。这样当滚动条出现时，它对内容没有影响。

这个EXAMPLE 展示了一种更老套的方式来实现这个目标，通过硬编码widths 而不是试图让浏览器通过padding 为我们完成它。如果这是可行的，如果您不想要永久滚动条，这是最简单的解决方案。

【讨论】：

这是一个很好的解决方案，但是我正在使用 Bootstrap 开发一个响应式网站，并且自动化宽度和所有内容很重要，你说什么？好吧，除非（按可能性递减的顺序）：有人想出如何让我的其他答案起作用（使用填充或边距）；您可以以某种方式使用media queries 选择性地应用填充；或 css expressions 在现代浏览器中实现以选择性地应用填充。我认为只有永久滚动条或使用JS检测滚动条是要走的路【参考方案10】：

_{编辑：这个答案目前不太正确，请参阅我的其他答案，看看我在这里尝试做什么。我正在尝试修复它，但如果您能提供帮助，请在 cmets 中提供帮助，谢谢！}

使用padding-right 将减轻滚动条的突然出现

EXAMPLE

从点中可以看出，无论是否存在滚动条，文本都会在换行前到达页面中的同一点。这是因为当引入滚动条时，填充隐藏在它后面，所以滚动条不会推动文本！

【讨论】：

滚动条宽度可以根据您使用的操作系统和浏览器而改变。它可以测量 20px 和 40px 你会使用所有可能值中的最大值一些设备/操作系统浏览器的滚动甚至没有宽度。【参考方案11】：

2021 年的解决方案是使用scrollbar-gutter，它将滚动条将使用的空间永久添加到元素。

使用

.element-class 
   scrollbar-gutter: stable both-edges;

both-edges 是可选的。

另请参阅https://caniuse.com/mdn-css_properties_scrollbar-gutter 和 https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter

overflow: overlay 已弃用。

【讨论】：

【参考方案12】：

.modal-dialog 
   position: absolute;
   left: calc(50vw - 300px);

其中 300 像素是我的对话框窗口宽度的一半。

这实际上是唯一对我有用的东西。

【讨论】：

【参考方案13】：

我在 Chrome 上遇到了同样的问题。仅当滚动条始终可见时才发生在我身上。（在常规设置中找到）我有一个模态，当我打开模态时我注意到...

body 
    padding-left: 15px;

被添加到正文中。为了阻止这种情况发生，我添加了

body 
    padding-left: 0px !important;

【讨论】：

【参考方案14】：

我无法为第一个答案添加评论，已经很久了......但是那个演示有问题：

if(b.prop('scrollHeight')>b.height())
    normalw = window.innerWidth;
    scrollw = normalw - b.width();
    $('#container').css(marginRight:'-'+scrollw+'px');

b.prop('scrollHeight') 总是等于 b.height()，

我觉得应该是这样的：

if(b.prop('scrollHeight')>window.innerHeight) ...

最后我推荐一个方法：

html 
 overflow-y: scroll;


:root 
  overflow-y: auto;
  overflow-x: hidden;


:root body 
  position: absolute;


body 
 width: 100vw;
 overflow: hidden;

【讨论】：

【参考方案15】：

我通过这种方式解决了滚动条的类似问题：

首先通过设置禁用垂直滚动条：

overflow-y: hidden;

然后制作一个位置固定的 div，高度等于屏幕高度，并使其宽度变细，看起来像滚动条。这个 div 应该可以垂直滚动。现在在这个 div 中创建另一个具有文档高度的 div（包含它的所有内容）。现在您需要做的就是在容器 div 中添加一个 onScroll 函数，并在 div 滚动时滚动主体。代码如下：

HTML：

<div onscroll="OnScroll(this);" style="width:18px; height:100%;  overflow-y: auto; position: fixed; top: 0; right: 0;">
    <div id="ScrollDiv" style="width:28px; height:100%; overflow-y: auto;">
    </div>
</div>

然后在你的页面加载事件中添加：

JS：

$( document ).ready(function() 
    var body = document.body;
    var html = document.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
    document.getElementById('ScrollDiv').style.height = height + 'px'; 
);

function OnScroll(Div) 
    document.body.scrollTop = Div.scrollTop;

现在滚动 div 就像滚动 body 而 body 没有滚动条一样。

【讨论】：

好的，对于显示经典滚动条的浏览器，用户如何知道还有更多内容可以滚动到？

以上是关于滚动条挤占内容宽度，影响布局的主要内容，如果未能解决你的问题，请参考以下文章

影响 div 宽度的滚动条

EXCEL如何调整滚动条的宽度？

JQueryUI 对话框：“自动”宽度不考虑垂直滚动条

页面出现滚动条的时候如何让滚动条不影响页面宽度

我有一个大div,里面有很多个小div,大div设置了滚动条，我想第一个小div不受滚动条影响,始终显示.

滚动条调整页面大小