CSS-オーバーフロー：スクロール; -常に垂直スクロールバーを表示しますか？

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

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

ただし、一部のユーザーにとって、そこにさらに多くのコンテンツがあることは明らかだとは思いません。彼らは私のdivが実際により多くのコンテンツを含んでいることを知らずにページを下にスクロールすることができました。私は高さを510pxにして一部のテキストを切り取り、一部のページではより多くのコンテンツがあるように見えますが、すべてのページで機能するわけではありません。

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

私自身、この問題に遭遇しました。OSx Lionは、使用されていない間はスクロールバーを非表示にし、より「滑らか」に見せますが、同時に、対処した問題が発生します。divにスクロール機能があるかどうかが分からない場合があります。

修正：あなたのCSSにインクルード-

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

/* always show scrollbars */

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}


/* css for demo */

#container {
  height: 4em;
  /* shorter than the child */
  overflow-y: scroll;
  /* clip height to 4em and scroll to show the rest */
}

#child {
  height: 12em;
  /* taller than the parent to force scrolling */
}


/* === ignore stuff below, it's just to help with the visual. === */

#container {
  background-color: #ffc;
}

#child {
  margin: 30px;
  background-color: #eee;
  text-align: center;
}

<div id="container">
  <div id="child">Example</div>
</div>

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

iPad Safariではwebkit-overflow-scrolling: touch;、CSSのどこかにある場合、NoviceCodingのソリューションは機能しません。ソリューションは、いずれかの出現をすべて削除され-webkit-overflow-scrolling: touch;たり入れ-webkit-overflow-scrolling: auto;NoviceCodingの溶液で。

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

また、ここにStack Overflowに重複する投稿があり、その他の詳細があります。

これにより、アクセスするためにスクロールする必要のあるコンテンツがウィンドウ内にある場合、スクロールバーが常に表示されます。これは、Mac上のすべてのウィンドウとすべてのアプリに適用されます。

Preferencesアップルメニューから[システム環境設定]を起動します[全般]設定パネルをクリックします[スクロールバーを表示する]を探し、[常に]の横にあるラジオボックスを選択します終了したらシステム環境設定を閉じます