[解決済み] スクロールバーを隠すが、スクロールはできる状態

質問

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

Google Chromeではそうなっています。

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

しかし、Mozilla FirefoxやInternet Explorerはそのようなことはないようです。

CSSでも試してみました。

overflow: hidden;

これでスクロールバーは隠れますが、それ以上スクロールできません。

ページ全体をスクロールできる状態で、スクロールバーを削除する方法はありますか？

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

どのように解決するのですか？

テストですが、正常に動作しています。

#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 Working Fiddle

または

使用方法 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 Working Fiddle

情報を提供します。

この回答をもとに、私は シンプルスクロールプラグイン .