[解決済み】CSS - Overflow: Scroll; - 常に垂直スクロールバーを表示する？

質問

そこで現在、私は

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

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

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

解決方法を教えてください。

ちょうど私もこの問題にぶつかったところです。OSx Lionでは、使用していない間はスクロールバーを隠して、よりquot;slick"に見えるようにしていますが、同時に、あなたが対処した問題が出てきます：人々は時々、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>

必要に応じて、外観をカスタマイズしてください。 ソース