【Scrapbox】右上のページメニュにスクロールバーが表示されるのを防ぐ【UserCSS】
概要
PCでScrapboxを横幅767pxのウィンドウで表示すると、ページメニューに横スクロールバーが表示される。
それを防ぐUserCSSを作成しました。
https://gyazo.com/56c707e1f7c208613c89a39cd6b9f772
環境
OS：Windows 10 Home
バージョン：22H2
ブラウザ：Google Chrome
バージョン：113.0.5672.127
なぜスクロールバーが表示されるのか？
おそらく、app.cssの以下の記述のoverflow-x: scroll;の影響で横スクロールバーが表示されている。
モバイル端末だと表示されないので、これ以外の原因もあるかもしれない…
code:app.css
.expandable-menu .page-menu {
display: inline;
position: relative;
top: 0;
height: 100%;
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
}
解決方法
下記のUserCSSを適応するします。
code:style.css
.expandable-menu .page-menu {
overflow: hidden;
}
追記
scrapbox.PageMenu.addMenu()を使用すると縦スクロールバーが表示される現象が発生したため、overflow-xからoverflowに変更しました。
使用例
適応前
https://gyazo.com/55ee8d4aeadde525c14ef0674679d3ebhttps://gyazo.com/c1409506369685a00c2ac4ad199fc49b
適応後
https://gyazo.com/b3e91a84edf02cf2e7160c4bff567208https://gyazo.com/7cf281cd8106d66afaa7c273e7c070f6
#Scrapbox #UserCSS #CSS