Question

“。one”列底部有一个神秘的缺口。

我收集到，这是由于不请求滚动条导致的。

尽管如此，垂直滚动条完全消失了，但是水平滚动消失了，但在其位置留有空隙。

这个差距是什么，我该如何消除？

d3.select('.one')
  .selectAll('div')
  .data(d3.range(40))
  .enter()
  .append('div')
  .attr('class', 'picture box')
  .append('h2')
  .text(d => d);

html, body {
    width: 100%; height: 100%; margin: 0;
}
.container {
    width: 100%; height: 100%;
    display: grid;
    grid-template-columns: 10%;
}

.box {
    background-color: #484848;
    color: #fff;
    border-radius: 5px;
    padding: 1px; margin: 1px;
}

.menu {
    text-align: center;
    overflow: scroll;
}
.menu::-webkit-scrollbar {
    width: 0 !important;
}

.one { grid-column: 1; grid-row: 1; }
.two { grid-column: 2; grid-row: 1; }

div.picture {
    box-sizing: content-box;
    max-width: 100%;

    border: 2px solid gray;
    border-radius: 5px;

    background-color: #222;
    display: flex;
    justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="container">
    <div class="box one menu noscrollbar">
        <h2>One</h2>
    </div>
    <div class="box two menu noscrollbar">
        <h2>Two</h2>
    </div>
</div>

Answer 1

这将有助于您了解在哪个浏览器中遇到此问题。在带有隐藏滚动条的Mac上的Firefox中，.one列的底部没有空格。

但是，您可以在overflow-y: scroll上尝试.menu，而不是overflow，因为这只会沿y轴滚动容器。 overflow-x当然是同伴。

Answer 2

这是因为当您允许它滚动时，它为水平滚动条留了一个位置。告诉它仅使用css中的overflow-y: scroll在y轴（上下）上滚动。

来自Mozilla：

如有必要，内容将被裁剪以适合填充框。浏览器始终显示滚动条，无论是否实际剪切了任何内容，都可以防止滚动条在内容更改时出现或消失。打印机仍然可以打印溢出的内容。

发生溢出时的整页说明程序：https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

请参阅下面的解决方案：

d3.select('.one')
  .selectAll('div')
  .data(d3.range(40))
  .enter()
  .append('div')
  .attr('class', 'picture box')
  .append('h2')
  .text(d => d);

html, body {
    width: 100%; height: 100%; margin: 0;
}
.container {
    width: 100%; height: 100%;
    display: grid;
    grid-template-columns: 10%;
}

.box {
    background-color: #484848;
    color: #fff;
    border-radius: 5px;
    padding: 1px; margin: 1px;
}

.menu {
    text-align: center;
    overflow-y: scroll;
}
.menu::-webkit-scrollbar {
    width: 0 !important;
}

.one { grid-column: 1; grid-row: 1; }
.two { grid-column: 2; grid-row: 1; }

div.picture {
    box-sizing: content-box;
    max-width: 100%;

    border: 2px solid gray;
    border-radius: 5px;

    background-color: #222;
    display: flex;
    justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="container">
    <div class="box one menu noscrollbar">
        <h2>One</h2>
    </div>
    <div class="box two menu noscrollbar">
        <h2>Two</h2>
    </div>
</div>

为什么消除滚动条会留下空白？

2 个答案: