スクロールバーを削除するとギャップが残るのはなぜですか？

debugcn 投稿 Dev

Vrokipal

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

グラントノエ

これは、スクロールを許可すると、水平スクロールバーの場所が残るためです。overflow-y: scrollcssで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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]