スクロールバーを非表示にしますが、スクロールは可能です。質問する

スクロールバーを非表示にしますが、スクロールは可能です。質問する

スクロールバーを表示せずにページ全体をスクロールできるようにしたいです。

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

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

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

CSS でもこれを試してみました:

overflow: hidden;

確かにスクロールバーは非表示になりますが、それ以上スクロールできなくなります。

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

CSS または HTML のみでお願いします。

ベストアンサー1

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

#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 ワーキングフィドル

情報:

この回答に基づいて、私はシンプルなスクロールプラグイン

おすすめ記事