☰

CSS - オーバーフロー: スクロール; - 垂直スクロールバーを常に表示しますか? 質問する

tag-icon • tag-icon css macos scroll overflow
CSS - オーバーフロー: スクロール; - 垂直スクロールバーを常に表示しますか? 質問する

現在、私は以下を持っています:

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

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

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

ベストアンサー1

私自身もこの問題に遭遇しました。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>

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

おすすめ記事