垂直滚动条导致水平滚动条答案

【问题标题】：Vertical Scrollbar leads to horizontal scrollbar垂直滚动条导致水平滚动条
【发布时间】：2012-11-14 05:03:39
【问题描述】：

我的 CSS 如下所示：

div.SOMECLASS {
  position: absolute;
  max-height: 300px
  height: auto;
  width: auto;
  overflow: auto;
  ...
}

div 高度和宽度自动缩放。高度已经固定了一个最大值：一旦达到这个值，就会出现垂直滚动条。这一切都很好。

现在的问题：
如果出现垂直滚动条，它们会占用大约 10 像素的水平空间，因为滚动条将被放置在内部div。
但是，宽度不自动缩放以允许垂直滚动条用完这些额外的 10 多像素。由于添加垂直滚动条之前的水平宽度正好适合内容（正如 width:auto 设置所预期的那样），div 现在也显示水平滚动条 - 以允许丢失10 像素。这很愚蠢。

如何避免使用这些水平滚动条，而只自动缩放 div 的宽度以使垂直滚动条适合？

如果可能的话，我正在寻找一种不依赖于完全禁用水平滚动的解决方案，因为这可能在某些时候需要（即对于某些输入）。

【问题讨论】：

尝试改用overflow-y: auto。这只会垂直放置滚动条。

标签： css scrollbar horizontal-scrolling vertical-scrolling

【解决方案1】：

刚刚想出了一个相当可行的解决方案（至少对于我这个问题的版本而言）。

我认为width: auto 的问题在于它的行为类似于width: 100vw；问题是，当垂直滚动条出现时，viewport width 保持不变（尽管有 ~10px 滚动条），但 可视区域 （正如我所说）减少了 10 像素。

显然用 percentage 定义宽度是根据这个“可视区域”来定义的，因此将您的代码更改为：

div.SOMECLASS {
  position: absolute;
  max-height: 300px
  height: auto;
  width: 100%;
  overflow: auto;
  ...
}

应该允许内容正确重新缩放！

附言您也可以改为添加overflow-x: hidden，这将停止出现水平滚动条，而只需在垂直滚动条出现时从您的 div 右侧切掉约 10px。

【讨论】：

刚刚注意到这是 2 岁 - 希望它对某人有用！
将宽度：100% 添加到我所有的子 div 中删除了滚动条 :)
这不仅解决了问题，还让我更了解了问题最初是如何产生的。
我尝试了@robertking 的想法，然后逐渐删除它们以了解我真正需要应用width: 100% 的想法。谢谢大家！

【解决方案2】：

我找到了一个可行但远非完美的解决方案：

我在我的 div 中添加了一个padding-right : 15px，以自动增长整个 div。现在，如果出现垂直滚动条，它们就适合填充，因此水平宽度仍然可以。

遗憾的是，当不需要垂直滚动时，当然也会显示填充，使我的 div 比它必须的宽一点...：/ 好吧，在我看来，这仍然比不需要的水平滚动条更可取.

【讨论】：

麻烦的是，15px 并不是一个跨平台的幻数。出于可访问性的原因，您的一些用户可能会有非常粗的滚动条。不幸的是，为了真正安全，您必须使用 JavaScript 来了解滚动条的宽度。
你是对的......这个问题真的总结了互联网的所有问题。 ://
...好吧，无论如何，使用 CSS3。除了 CSS2 中引入的系统颜色之外，也许 CSS4 将有办法访问更多系统数据。
@Michael：你知道可以用什么 Javascript（或 jQuery）技巧来找出是否有滚动条以及它的宽度，从而可以适当地扩大 div 吗？
@OsakaWebbie：我不得不这样做已经有一段时间了，但对我有用的内容与这些页面上描述的内容几乎相同：chris-spittles.co.uk/jquery-calculate-scrollbar-width stackoverflow.com/questions/986937/…

【解决方案3】：

通常设置100vw 是问题所在。只需将其删除，您的宽度将是 100%，无论如何这将是您想要的。

【讨论】：

【解决方案4】：

我的问题在 Google 上的搜索结果排名第一（类似于 OP，但不一样）。

这是看似不必要的水平滚动条的常见场景：

你有一个元素，比如一个表格，它使用自动调整大小。如果在添加所有行之前完成自动调整大小，则它不会为垂直滚动条计算足够的空间。在添加行之后进行调整大小解决了我的问题——即便如此，我也需要超时

this.http.get('someEndPoint').subscribe(rows => {
  this.rowData = rows;
  setTimeout(()=>{sizeColumnsToFit()}, 50);
});

【讨论】：

【解决方案5】：

即使没有设置固定宽度，也会出现此错误（特定于 Firefox）。

例如，如果您在灵活的包装器 div (display: inline-block;) 中有一个可垂直滚动的容器 div (overflow: auto;)，那么当您将窗口大小调整为小于内容可以换行时，首先是水平滚动条将出现在您的容器 div 中，只有在那之后，灵活的包装器 div 才会增长，或者最终会在您的窗口中出现辅助水平滚动条。

结果是一个无用的水平滚动条，只能滚动垂直滚动条的宽度：

为了摆脱这个问题，您可以使用本示例中的 javascript 代码（在 Firefox 和 Chromium 中测试）：

<!DOCTYPE html>
<html>
<body>
    <style type="text/css">
    .page {height: 200px;width: 400px;overflow: auto;background-color: #ccc;border: 5px solid #000;margin: 5px;}
    .wrapper {display: inline-block;min-width: 100%;margin: 20px;}
    .scroller {overflow: auto;max-height: 100px;background-color: #f00;}
    .content {min-height: 500px;min-width: 400px;background-color: #cfc;}
    </style>
    <div class="page">
        <div class="wrapper">
            <div class="scroller">
                <div class="content">
                    The wrapper-div should expand to fit the scroller content.
                    Reduce the browser window width, and a useless horizontal scrollbar appears.
                </div>
            </div>
        </div>
    </div>
    <div class="page">
        <div class="wrapper">
            <div class="scroller ensure-scrollbar-width-padding">
                <div class="content">
                    But with the javascript-function, this is now fixed.
                    There is no horizontal scrollbar in the wrapper-div.
                </div>
            </div>
        </div>
    </div>
    <script>
    var ensureScrollbarWidthPadding = function(elem)
    {
        if(!parseInt(elem.scrollWidth) || !parseInt(elem.clientWidth) || !parseInt(elem.offsetWidth))
        {
            return; // no browser-support for this trick
        }

        var update = function()
        {
            // reset to as if not having any right-padding
            elem.style.paddingRight = '0px';

            // check if horizontal scrollbar appeared only because of the vertical scrollbar
            if(elem.scrollWidth !== elem.clientWidth)
            {
                elem.style.paddingRight = (elem.offsetWidth - elem.clientWidth) + 'px';
            }
            else
            {
                elem.style.paddingRight = '0px';
            }
        };

        window.addEventListener('resize', update, false);
        window.addEventListener('load', update, false);

        update();

        return update;
    };

    (function()
    {
        var elems = document.getElementsByClassName('ensure-scrollbar-width-padding');
        for(var i=0;i<elems.length;++i)
        {
            ensureScrollbarWidthPadding(elems[i]);
        }
    })();
    </script>
</body>
</html>

javascript函数ensureScrollbarWidthPadding动态添加padding-right到可垂直滚动的容器中，保证水平滚动条永远不会出现。

【讨论】：

是的。火狐的错误。在我的情况下，当我在具有white-space: nowrap; 列的表的容器 div 中有overflow: auto 时会触发它。我有多个表，其中只有一些具有破坏布局的水平滚动条。所以填充正确的解决方案对我不起作用