javascript - オーバーフローでスクロールバーを非表示:スクロールが有効

Question

overflow:scroll; を持つ div のスクロールバーを非表示にする必要があります。div がマウスとキーボードでスクロールするように有効にしますが、スクロールバー自体は表示されません。

cssでこれを行う方法はありますか、それともjavascriptを使用する方法ですか?

Answer 1

これは純粋なCSSで行うことができます（少なくともWebkitブラウザーでは）。これを実現するには、特別なスクロールバー疑似クラスを使用する必要があります

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

詳細については、この優れたブログ投稿をお読みください。

Answer 2

スクロールするdivをオーバーフローを非表示にして2番目のdivの内側に配置し、内側のdivを少し広く、高くすることができます（ただし、量はブラウザーによって異なる場合があります）。

このようなもの：

#outer {
    overflow:hidden;
    width:200px; 
    height:400px;
    border:1px solid #ccc;
}
#inner {
    overflow:scroll; 
    width:217px; 
    height:417px;
}​

http://jsfiddle.net/uB6Dg/1/の完全な例。

編集： 残念ながら、テキストを強調表示してドラッグすることでスクロールバーにアクセスできます。パディングなどは少し面倒ですが、それ以外はjavascriptが最適だと思います。

Answer 3

このサイトhttp://jscrollpane.kelvinluck.com/から jquery プラグインを使用する必要があります。