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

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

# overlap: scroll を使う

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

```css
.pain {
  overflow-y: scroll
}
```

https://developer.mozilla.org/ja/docs/Web/CSS/overflow

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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="hakomikan" data-slug-hash="abvyBxG" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Isolated Scroll">
  <span>See the Pen <a href="https://codepen.io/hakomikan/pen/abvyBxG">
  Isolated Scroll</a> by hakomikan (<a href="https://codepen.io/hakomikan">@hakomikan</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

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

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

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

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

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

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

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

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="hakomikan" data-slug-hash="ExVvZPp" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Isolated Scroll v2">
  <span>See the Pen <a href="https://codepen.io/hakomikan/pen/ExVvZPp">
  Isolated Scroll v2</a> by hakomikan (<a href="https://codepen.io/hakomikan">@hakomikan</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

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

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

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

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

```css
::-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);  
}
```

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="hakomikan" data-slug-hash="eYpEgvr" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Isolated Scroll v3">
  <span>See the Pen <a href="https://codepen.io/hakomikan/pen/eYpEgvr">
  Isolated Scroll v3</a> by hakomikan (<a href="https://codepen.io/hakomikan">@hakomikan</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

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

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

https://stackoverflow.com/questions/19230289/use-transition-on-webkit-scrollbar

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

```css
::-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);
}
```

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="hakomikan" data-slug-hash="VwvzPGL" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Isolated Scroll v4">
  <span>See the Pen <a href="https://codepen.io/hakomikan/pen/VwvzPGL">
  Isolated Scroll v4</a> by hakomikan (<a href="https://codepen.io/hakomikan">@hakomikan</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>