css で独立してスクロールできる領域を作る

複数のペインに別れた画面でそれぞれのペインをバラバラにスクロールしたくなったので、そのときに試したことを記録しておく。

overlap: scroll を使う

まず、素朴には、 css の overlap 属性を使うとスクロールバーが表示される要素を作ることができる。

.pain {
  overflow-y: scroll
}

使ってみた結果は以下のようになる。

See the Pen Isolated Scroll by hakomikan (@hakomikan) on CodePen.

スクロールバーが表示されて、独立してスクロールできるようになった。
でも、Windows だとスクロールバーが大きくて邪魔になっている。

スクロールバーの形を変更する

大きいスクロールバーの形を変更する。
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  display: none;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: gray;
}

各ブラウザに変更の機能があるようなのだけど、 ここでは webkit(chrome) 上でだけ実験をすすめる。

See the Pen Isolated Scroll v2 by hakomikan (@hakomikan) on CodePen.

-webkit-scrollbar から始まるスタイルを調整するとスクロールバーを控えめな外見にできる。

近づいたときだけスクロールバーを表示する

常時表示されているのも邪魔に感じる。
スクロールするときだけ出てきてくれれば良い。

ひとつ上の要素の上に乗ったときだけ、表示して、それ以外のときには透明にしておけばよさそう。

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0,0,0,0);
}

*:hover::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.3);  
}

See the Pen Isolated Scroll v3 by hakomikan (@hakomikan) on CodePen.

近づいたときだけスクロールバーをふわっと表示する

ここまででも、十分満足なのだけど、できれば、スクロールするときだけ、ふわっと表示されて欲しい。
でも、-webkit-scrollbar には、css の transparent を使うことは出来ないらしい。

背景のクリッピングとかを駆使した怪しいテクニックを見つけたので試した結果を貼っておく。

::-webkit-scrollbar {
  background-color: rgba(0, 0, 0, 0);
  width: 8px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: inherit;
}

.pain {
  height: 100%;
  overflow-y: scroll;
  
  -webkit-background-clip: text;
  background-color: rgb(0, 0, 0, 0);
  transition: background-color 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.pain:hover {
  background-color: rgba(0, 0, 0, 0.18);
}

See the Pen Isolated Scroll v4 by hakomikan (@hakomikan) on CodePen.