web-dev-qa-db-ja.com

CSS - オーバーフロー：スクロール。 - 常に垂直スクロールバーを表示する？

だから今私は持っています：

#div {
  position: relative;
  height: 510px;
  overflow-y: scroll;
}

しかし、私はそれがそこにもっとコンテンツがあることが何人かのユーザーにとって明白になるとは思わない。私のdivに実際にもっと多くのコンテンツが含まれていることを知らなくても、ページを下にスクロールできます。私はそれがいくつかのページでそれがより多くの内容があるように見えないようにそれがいくつかのテキストを切り取るように高さ510pxを使う、しかしこれはそれらすべてのために働かない。

私はMacを使用しています、そしてChromeとSafariでは垂直スクロールバーはマウスがDivの上にありあなたがアクティブにスクロールしている時にのみ表示されます。常に表示させる方法はありますか？

cssmacosscrolloverflow
195
Jambo

私はこの問題に遭遇しました。 OSx Lionはスクロールバーを使わない間は隠すように隠していますが、同時にあなたが対処している問題が発生します。Divにスクロール機能があるかどうか分からない人もいます。

修正：あなたのCSSに含める - 

@media(device-width: 768px) and (device-height: 1024px){
    ::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 7px;
    }
    ::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: rgba(0,0,0,.5);
        -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
    }
}

必要に応じて外観をカスタマイズします。 出典

336
NoviceCoding

IPad Safariについて、CSSのどこかに-webkit-overflow-scrolling: touch;があると、NoviceCodingのソリューションは機能しません。解決策は、発生した-webkit-overflow-scrolling: touch;をすべて削除するか、NoviceCodingの解決策で-webkit-overflow-scrolling: auto;を配置することです。

12
Razan Paul

私のテストでは、これはiOS 7.1.x上のSafari上のiPadでも動作しますが、iOS 6についてはよくわかりません。ただし、Firefoxでは機能しません。 jScrollPane と呼ばれるクロスブラウザ対応を目的としたjQueryプラグインがあります。

また、 Stack Overflowに関する重複記事 があります。これには他にも詳細があります。

0
JStarcher