正文 

当前位置： 首页 > 问答 >

Chrome 为滚动条保留空间，即使它是隐藏的

     2023-03-05     125

关键词：

【中文标题】Chrome 为滚动条保留空间，即使它是隐藏的【英文标题】：Chrome reserves space for scrollbar even if it is hidden 【发布时间】：2014-11-14 13:47:46 【问题描述】：

我在 webkit 浏览器（IE 和 FF 都可以）上遇到了一个问题，其中滚动条空间是为元素保留的，即使滚动条没有显示。您可以在示例中看到，一旦将中间的鼠标悬停，滚动条空间仍会保留。我只是想知道这是 Chrome 的问题还是只是 HTML/CSS 规范的一部分。这个类似的question 提供了一个修复，但它没有解释它是否是一个错误，并且必须为孩子设置一个明确的宽度不是我想要做的。

        .hidden-scroll 
            background: black;
            overflow-y: hidden;
            height: 400px;
            width: 300px;
        

        .hidden-scroll:hover 
            overflow-y: auto;
        

        .no-hover.hidden-scroll:hover 
            overflow-y: hidden;
        

        .hidden-scroll-content 
            background: red;
            height: 50px;
        
<body>
<div>No scroll needed</div>


<div class="hidden-scroll">
    <div class="hidden-scroll-content">1</div>
    <div class="hidden-scroll-content">2</div>
    <div class="hidden-scroll-content">3</div>
    <div class="hidden-scroll-content">4</div>
</div>

<div>Scroll on hover</div>

<div class="hidden-scroll">
    <div class="hidden-scroll-content">1</div>
    <div class="hidden-scroll-content">2</div>
    <div class="hidden-scroll-content">3</div>
    <div class="hidden-scroll-content">4</div>
    <div class="hidden-scroll-content">5</div>
    <div class="hidden-scroll-content">6</div>
    <div class="hidden-scroll-content">7</div>
    <div class="hidden-scroll-content">8</div>
    <div class="hidden-scroll-content">9</div>
    <div class="hidden-scroll-content">10</div>
    <div class="hidden-scroll-content">11</div>
    <div class="hidden-scroll-content">12</div>
</div>

<div>No scroll on hover</div>

<div class="no-hover hidden-scroll">
    <div class="hidden-scroll-content">1</div>
    <div class="hidden-scroll-content">2</div>
    <div class="hidden-scroll-content">3</div>
    <div class="hidden-scroll-content">4</div>
    <div class="hidden-scroll-content">5</div>
    <div class="hidden-scroll-content">6</div>
    <div class="hidden-scroll-content">7</div>
    <div class="hidden-scroll-content">8</div>
    <div class="hidden-scroll-content">9</div>
    <div class="hidden-scroll-content">10</div>
    <div class="hidden-scroll-content">11</div>
    <div class="hidden-scroll-content">12</div>
</div>


</body>

【问题讨论】：

这可能是 Blink & Webkit 中的错误。你一定要报告这个。我只在 Firefox 中进行了测试，它运行正常。我又做了一些测试，Chrome 似乎只能正确处理文本。这是正确的行为jsfiddle.net/650pyaq2/1 这是错误的行为jsfiddle.net/re4o23zr 【参考方案1】：

似乎是一个错误，我注意到在重置项目的宽度（自动/100% 的任何值）后，框被重新绘制并正确布局，直到另一个悬停，好吧，一会儿一些 hacky hack 怎么样？ Hacky demo

.wrapper 
    height:400px;
    width:300px;
    overflow:hidden;


.wrapper:hover .hidden-scroll 
    width:300px;


.wrapper:hover .hidden-scroll div 
    padding-right:0;


.hidden-scroll 
  background: black;
  overflow-y: auto;
  overflow-x: hidden;
  height: 400px;
  width: 330px;


.hidden-scroll div 
  background: red;
  height: 50px;
  width: auto;
  padding-right:30px;

【讨论】：

【参考方案2】：

我遇到了和你一样的情况（我想），我想要滚动功能但我不想要滚动条。我还在可见区域的末端放置了自定义的 分页控件，以在可滚动区域中进行分页。所以滚动条让我很烦。

您可以通过以下方式关闭给定类的滚动条：

.class::-webkit-scrollbar 
   width: 0 !important;
   height: 0 !important;

没有高度：0，我看到滚动条高度的空白区域，它正在吞噬内容。一旦我将 height:0 添加到这个 CSS 中，它就消失了，一切都很好。

希望这会有所帮助。

现在我要去看看是否可以为 Edge、IE 和 Firefox 找到相同的东西。这适用于 Chrome 和 Safari。

【讨论】：

【参考方案3】：

如果您不想看到滚动条，请尝试（为我工作）

.class::-webkit-scrollbar 
 display : none;

【讨论】：

【参考方案4】：

需要替换为：

overflow: hidden;

相反。 因为它说它的溢出是隐藏的， 但仍然能够向下滚动框， 而毗湿奴所说的，你需要做display: none; 也就是说不显示任何内容。

【讨论】：

【参考方案5】：

在::-webkit-scrollbar 中使用overflow: hidden; 对我有用。

[className]::-webkit-scrollbar 
  overflow: hidden;

您可以在此处阅读更多信息：::-webkit-scrollbar。

【讨论】：

【参考方案6】：

我在 Ionic 5 上看到过这个烦人的问题，但仅限于 Windows 和 Chrome。 我找到的解决方案是将其添加到 app-root 中的 global.scss 中：

ion-content 
  width: 102% // Solve empty space left for scrollbar on Windows/Chrome

实际上并没有在页面上错位太多，所以我不需要调整其他任何东西。如果您确实需要，请发布您的修改。

更新 - 决定通过以下方式修复右侧的空间：

--padding-end: 2%; // Solve empty space left for scrollbar on Windows/Chrome

【讨论】：

为 QScrollArea 保留空间

...带有自定义QWidget的QScrollArea。我面临的问题是，每当出现滚动条时，都会导致小部件中的元素发生变化。所以，我想保留一些空间，所以当滚动条出现或消失时，小部件不受影响。我怎样才能做到这一点？【问题讨论】：myScrollA... 查看详情

Safari/Chrome (Webkit) - 无法隐藏 iframe 垂直滚动条

】Safari/Chrome(Webkit)-无法隐藏iframe垂直滚动条【英文标题】：Safari/Chrome(Webkit)-Cannothideiframeverticalscrollbar【发布时间】：2010-12-1402:16:00【问题描述】：我在www.example.com上有一个iframe指向support.example.com（它是指向外部域的CNAME）。我... 查看详情

如何隐藏滚动条但保留溢出表的功能？ [复制]

】如何隐藏滚动条但保留溢出表的功能？[复制]【英文标题】：HowcanIhidethescrollbarbutkeepthefunctionalityformyoverflowingtable?[duplicate]【发布时间】：2020-06-1106:42:50【问题描述】：我创建了一个表格，其中包含一个具有特定最大高度的容器... 查看详情

前端（浏览器兼容性ie与chrome）之滚动条的隐藏(代码片段)

...学习，整理了如下的几个思路：一、使用CSS样式来解决（Chrome浏览器）　　#content::-webkit-scrollbar/*此处设置滚动条的宽度和高度，宽度为纵向滚动条设置，高度为横向滚动条设置，设置为0的滚动条消失*/width:4px;height:4px;#content::-we... 查看详情

Chrome（Windows）不隐藏滚动条

】Chrome（Windows）不隐藏滚动条【英文标题】：Chrome(windows)doesnothidescrollbar【发布时间】：2014-09-1416:19:34【问题描述】：我有这个可滚动的div，它（在我的Mac上的Chrome中）在我不滚动时会隐藏滚动条。但是，在Windows8上，它在Chrome... 查看详情

Chrome 滚动条从底部反弹

】Chrome滚动条从底部反弹【英文标题】：ChromeScrollbarBouncesfrombottom【发布时间】：2016-03-3017:44:52【问题描述】：所以在处理一个项目时，我注意到当我滚动到底部时，滚动条会弹回返回一个页面。最初我不得不让首页为footer提供... 查看详情

C++ 控制台 - 大小合适仍然为滚动条留下空白空间

】C++控制台-大小合适仍然为滚动条留下空白空间【英文标题】：C++Console-properlysizedstillleavesemptyspaceforscrollbars【发布时间】：2018-05-1816:25:30【问题描述】：我（和我之前的许多人一样，我已经做了很多搜索）试图让我的控制台显... 查看详情

18一些常见属性

...e溢出内容可见 overflow:hidden溢出内容隐藏 overflow:scroll显示滚动条 overflow:atuo自动判断是否显示滚动条鼠标光标形状 cursor：default cursor:pointer 查看详情

路由跳转后跳转回来保留滚动条位置

...条位置原理：移动端浏览器有往返缓存功能，现在的PC端chrome是移除了这个功能的，详见大佬文章，很详细https://github.com/LeuisKen/leuisken.github.io/issues/6如果想禁用往返缓存功能，则 查看详情

调整自动滚动滚动条以隐藏特定的表单大小

】调整自动滚动滚动条以隐藏特定的表单大小【英文标题】：AdjustAutoScrollscrollbarstohideatspecificformsize【发布时间】：2015-04-1120:48:36【问题描述】：我有一个带有几个面板的表单，里面充满了控件（底部和右侧仍有足够的空间）。... 查看详情

纯css，div隐藏滚动条，保留鼠标滚动效果。

 代码如下：<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title></title><stylety 查看详情

滚动条自动显示和隐藏(代码片段)

mac的chrome的滚动条会在停止滚动后自动隐藏，开始滚动时显示。但windows的滚动条会一直显示，在设置里设置了自动隐藏也是一样。这里有个统一的实现，可以使得不同系统在chrome上的滚动条显示一致。原理是用了伪... 查看详情

滚动条自动显示和隐藏(代码片段)

mac的chrome的滚动条会在停止滚动后自动隐藏，开始滚动时显示。但windows的滚动条会一直显示，在设置里设置了自动隐藏也是一样。这里有个统一的实现，可以使得不同系统在chrome上的滚动条显示一致。原理是用了伪... 查看详情

滚动条自动显示和隐藏(代码片段)

mac的chrome的滚动条会在停止滚动后自动隐藏，开始滚动时显示。但windows的滚动条会一直显示，在设置里设置了自动隐藏也是一样。这里有个统一的实现，可以使得不同系统在chrome上的滚动条显示一致。原理是用了伪... 查看详情

隐藏滚动条但不停止滚动[重复]

】隐藏滚动条但不停止滚动[重复]【英文标题】：Hiddingscrollbarbutnotstopingscrolling[duplicate]【发布时间】：2014-11-0222:57:24【问题描述】：有没有办法隐藏滚动条，但仍然保留向上/向下滚动的选项？我尝试溢出：隐藏；它删除了滚动... 查看详情

如何在 ExtJS 4 网格面板中保留垂直滚动条？

】如何在ExtJS4网格面板中保留垂直滚动条？【英文标题】：HowtoreserveverticalscrollbarinanExtJS4gridpanel?【发布时间】：2013-07-2216:13:11【问题描述】：我想知道是否有办法使用ExtJS4.1.1为网格面板中的垂直滚动条保留空间。我记得我可以... 查看详情

js原生监听滚动条

...滚动条也能滚动以上便实现了滚动条隐藏且能滚动这里IE/Chrome的用法是一致的，滚动事件onmousewheel，判断滚动属性为e.wheelDelta，且向上滚动是+120，向下是-120而FireFox滚动事件DOMMouseScroll，判断滚动属性为e.detail，且向上是-3，向下... 查看详情

如何在 iOS Chrome 中使用 CSS 滚动捕捉 + 图片错误隐藏滚动条

】如何在iOSChrome中使用CSS滚动捕捉+图片错误隐藏滚动条【英文标题】：HowhidescrollbarwithCSSscrollsnap+picturebuginiOSChrome【发布时间】：2019-06-2714:11:28【问题描述】：如何在iOSSafari和Chrome中隐藏原生滚动条？我正在使用此代码：.scroll-sn... 查看详情