UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【Storybook】scroll barを消す

Storybookを使っていてView Portをスマホ用にしたときに右端にスクロールバーが表示される

f:id:uggds:20210905155239p:plain:w300

これを消したい

消し方はこちらの記事にまとめられていたので、これを参考にした

www.yoheim.net

Chromeでは-webkit-scrollbarをつければよいことがわかったので、あとはStorybookではどの要素につけるべきか調べたら.sb-show-mainにつけるのが良さそうであることがわかった

globalにスタイルを定義したいので、preview-head.htmlを用意して次のように定義したら消えた

<style>
    .sb-show-main::-webkit-scrollbar {
        display: none;
    }
</style>