CSS スクロール

※こちらは学習中のメモ書きです。プログラミング勉強中の者が書いています。

scrollの作り方

上から下へのスクロールは overflow: scroll; と height と合わせて使用する。 この時heightが無いと全体が表示されてしまい、縦のスクロールが効かないので注意。

また、ブラウザによりスクロールバーの表示が異なることを配慮して

overflow-x ：x方向(横)
overflow-y ：y方向(縦)

ごとに指定するのも良い。

例) 上下スクロールの場合(y方向のスクロール可・x方向非表示)  

ul {
  height: 150px;
  margin: 10px;
  overflow-y: scroll;
  overflow-x: hidden;
  border-radius: 3px;
}

li {
  background-color: gray;
  height: 40px;
  padding-left: 15px;
  margin-bottom: 3px;
  line-height: 2.5;
}

li a {
  width: 100%;
  color: white;
  text-decoration: none;
}

※ちなみに横方向のscrollの場合は
overflow:scrollとwhite-space:nowrap を使用する。

参考サイト： 【CSS】overflowの使い方：hiddenやscrollの違いは？