Chrome会为滚动条保留空间,即使它已被隐藏

Question

Chrome会为滚动条保留空间,即使它已被隐藏

pll*_*lee 15 html css safari opera google-chrome

我所遇到的WebKit浏览器的问题(IE和FF都ok),其中滚动空间保留给即使滚动条不显示的元素.您可以在示例中看到,一旦中间的一个悬停,滚动条空间仍然保留.我只是想知道这是Chrome的问题还是仅仅是HTML/CSS规范的一部分.这个类似的问题提供了一个修复,但它没有解释它是否是一个错误,并且必须在子项上设置明确的宽度不是我想要做的.

        .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;
        }

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mac*_*was 0

看起来像一个错误，我注意到在重置项目的宽度（到任何值自动/100％）后，框被重新绘制并正确布局，直到另一个悬停，好吧，一会儿一些黑客怎么样？ Hacky 演示

.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;
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，11 月前
查看次数：	2823 次
最近记录：	6 年，5 月前