高さが16px以下の画像を指定の位置に表示させたいのに、余計な隙間ができる。

うおおおお。~/.config/gtk-3.0/settings.ini に Setting セクション作って gtk-primary-button-warps-slider=false て書いたらブラウザのスクロールバーの挙動が変わった!これが欲しかったんだよ!
winはSHIFTを押しながらブラウザのスクロールバーをクリックすれば一発で戻れるのか~

webkit系のSafariとChrome限定ですが、CSSプロパティ::-webkit-scrollbarでブラウザのスクロールバーをカスタマイズできます。

Mac OSのオシャレUI…

OS X以降のMacOSではスクローラブルな要素に対してもスクロールバーは非表示で、スクロールが始まったタイミングで初めてふわりと表示させる仕様になっています。
お洒落な演出ですが、この演出のせいでスクロールバー非表示のMacとスクロールバー常時表示のWinでレイアウトがずれてしまうという困った現象が起きます。
OSが違うだけで全く同じブラウザ相手なのでブラウザハックも使ません。

でも::-webkit-scrollbarを覚えておけばもう安心!

応用

::-webkit-scrollbarを特定のクラスの中(下記の例なら.container内)に書けば、そのクラスの中だけでスクロールバーのデザインを変えることができます。
メディアクエリを使ってスマホ時とPC時のスクロールバーを異なるデザインにするのも良さそう。

HTML&CSS

index.html
<div class="container">
  <div class="inner"></div>
</div>
scrollbar.css
/*スクロールバー全体*/
::-webkit-scrollbar {
    width: 10px;
}

/*スクロールバーの軌道*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
  border-radius: 10px;
}

/*スクロールバーの動く部分*/
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 50, .5);
  border-radius: 10px;
  box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
}

.container{
  width: 100%;
  height: 400px;
  overflow: auto;
}

.inner{
  background-image: url("http://lorempixel.com/800/800/");
  background-repeat: no-repeat;
  width:100%;
  height:800px;
}

サンプル

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

  • コメント

    1. 匿名希望
      2017/09/14(木) 23:05:10

      うおおおお。~/.config/gtk-3.0/settings.ini に Setting セクション作って gtk-primary-button-warps-slider=false て書いたらブラウザのスクロールバーの挙動が変わった!これが欲しかったんだよ!

    2. 匿名希望
      2017/09/14(木) 23:05:10

      winはSHIFTを押しながらブラウザのスクロールバーをクリックすれば一発で戻れるのか~

    記事に戻る

関連記事