1543

ページ全体をスクロールできるようにしたいのですが、スクロールバーは表示されません。

Google Chrome では次のようになります。

::-webkit-scrollbar {
    display: none;
}

しかし、Mozilla Firefox と Internet Explorer はそのようには動作しないようです。

私もCSSでこれを試しました：

overflow: hidden;

それはスクロールバーを非表示にしますが、それ以上スクロールできません。

ページ全体をスクロールしながらスクロールバーを削除する方法はありますか?

CSSかHTMLだけでお願いします。

4

38 に答える 38

961

正常に動作している単なるテスト。

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

働くフィドル

JavaScript:

スクロールバーの幅はブラウザによって異なるため、JavaScript で処理した方がよいでしょう。Element.offsetWidth - Element.clientWidthすると、正確なスクロールバーの幅が表示されます。

JavaScriptワーキングフィドル

または

を使用してPosition: absolute、

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
}

働くフィドル

JavaScriptワーキングフィドル

情報：

この回答に基づいて、単純なスクロール プラグインを作成しました。

于 2013-05-21T13:37:22.267 に答える
522

これは、単純な CSS プロパティで機能します。

.container {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.container::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

古いバージョンの Firefox では、次を使用します。overflow: -moz-scrollbars-none;

于 2016-08-17T11:03:55.463 に答える
7

使用する：

CSS

#subparent {
    overflow: hidden;
    width: 500px;
    border: 1px rgba(0, 0, 0, 1.00) solid;
}

#parent {
    width: 515px;
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 10%;
}

#child {
    width: 511px;
    background-color: rgba(123, 8, 10, 0.42);
}

HTML

<body>
    <div id="subparent">
        <div id="parent">
            <div id="child">
                <!- Code here for scroll ->
            </div>
        </div>
     </div>
</body>
于 2015-04-18T17:46:55.887 に答える
7

最新のブラウザーでは、次を使用できますwheel event。

// Content is the element you want to apply the wheel scroll effect to
content.addEventListener('wheel', function(e) {
    const step = 100; // How many pixels to scroll

    if (e.deltaY > 0) // Scroll down
        content.scrollTop += step;
    else // Scroll up
        content.scrollTop -= step;
});
于 2017-11-12T14:22:54.203 に答える
5

これが水平スクロールの方法です。CSS のみで、Bootstrap / col-* などのフレームワークでうまく機能します。2 つの余分なと、 orセットdivを持つ親のみが必要です。widthmax-width

テキストを選択してスクロールするか、タッチスクリーンを使用している場合は指でスクロールできます。

.overflow-x-scroll-no-scrollbar {
    overflow: hidden;
}
.overflow-x-scroll-no-scrollbar div {
    overflow-x: hidden;
    margin-bottom: -17px;
    overflow-y: hidden;
    width: 100%;
}
.overflow-x-scroll-no-scrollbar div * {
    overflow-x: auto;
    width: 100%;
    padding-bottom: 17px;
    white-space: nowrap;
    cursor: pointer
}

/* The following classes are only here to make the example looks nicer */
.row {
    width: 100%
}
.col-xs-4 {
    width: 33%;
    float: left
}
.col-xs-3 {
    width:25%;
    float:left
}
.bg-gray {
    background-color: #DDDDDD
}
.bg-orange {
    background-color:#FF9966
}
.bg-blue {
    background-color: #6699FF
}
.bg-orange-light{
    background-color: #FFAA88
}
.bg-blue-light{
    background-color: #88AAFF
}
<html><body>
  <div class="row">
    <div class="col-xs-4 bg-orange">Column 1</div>
    <div class="col-xs-3 bg-gray">Column 2</div>
    <div class="col-xs-4 bg-blue">Column 3</div>
  </div>
  <div class="row">
    <div class="col-xs-4 bg-orange-light">Content 1</div>
    <div class="col-xs-3 overflow-x-scroll-no-scrollbar">
      <div>
        <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
      </div>
    </div>
    <div class="col-xs-4 bg-blue-light">Content 3</div>
  </div>
</body></html>

怠惰な人のための短いバージョン:

.overflow-x-scroll-no-scrollbar {
    overflow: hidden;
}
.overflow-x-scroll-no-scrollbar div {
  overflow-x: hidden;
  margin-bottom: -17px;
  overflow-y: hidden;
  width: 100%;
}
.overflow-x-scroll-no-scrollbar div * {
  overflow-x: auto;
  width: 100%;
  padding-bottom: 17px;
  white-space: nowrap;
  cursor:pointer
}

/* The following classes are only here to make the example looks nicer */
.parent-style {
    width: 100px;
    background-color: #FF9966
}
<div class="parent-style overflow-x-scroll-no-scrollbar">
  <div>
    <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
  </div>
</div>

于 2016-12-07T15:18:17.697 に答える
3

これは、すべてのブラウザーで機能するはずの divitis 風のソリューションです...

マークアップは次のようになり、相対的な配置で何かの中にある必要があります (そして、その幅は、たとえば 400 ピクセルに設定する必要があります)。

<div class="hide-scrollbar">
    <div class="scrollbar">
        <div class="scrollbar-inner">

        </div>
    </div>
</div>

CSS:

.hide-scrollbar {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.scrollbar {
    overflow-y: scroll;
    position: absolute;
    top: 0;
    left: 0;
    right: -50px;
    bottom: 0;
}

.scrollbar-inner {
    width: 400px;
}
于 2016-11-12T21:34:08.157 に答える
-3

私はこの問題を抱えていましたが、修正は非常に簡単です。

コンテナを 2 つ用意します。内側はスクロール可能なコンテナーになり、外側は明らかに内側を収容します。

#inner_container { width: 102%; overflow: auto; }
#outer_container { overflow: hidden }

非常にシンプルで、どのブラウザでも動作するはずです。

于 2014-07-16T23:17:09.493 に答える