Chrome&Firefox中的滾動條樣式
滾動條的歸屬
Chrome中滾動條屬于開啟overflow的元素的父元素
Firefox中滾動條屬于開啟overflow的元素
舉個例子：
以上結(jié)構(gòu)中，要想改動滾動條的樣式在Chrome和Firefox中分別需要這樣寫：
Chrome中
Firefox中
注意?。?！
100版本的Firefox對默認(rèn)的滾動條做了修改，以上只有scrollbar-width:none;能生效。
滾動條的布局
上面說過，Chrome中滾動條屬于開啟overflow的元素的父元素，
但是?。。?/p>
在進行布局運算的時候，仍把滾動條視作開啟overflow的元素的子元素
Firefox的新滾動條（100版本以上）不會出現(xiàn)這個問題
問題
如果網(wǎng)頁中有多個行，有的有滾動條，有的沒有
作為一個前端，這種時候不可能挨個給每個行單獨寫樣式，因為頁面是根據(jù)后端給的數(shù)據(jù)來渲染的，今天數(shù)據(jù)少不需要條，明天可能數(shù)據(jù)就多了，不可能數(shù)據(jù)庫里的數(shù)據(jù)一變就通知前端改樣式
理想的情況是Firefox中展示的樣子
解決方案
那么問題來了，
Chrome要怎么實現(xiàn)Firefox中那樣的情況呢？
MDN走起
注意?。。?/span>
Firefox是不支持這個屬性值的，為了兼容性考慮，CSS要這樣寫
瀏覽器支持的時候取下面那條，不支持的時候取上面那條
移動端
眾所周知，移動端的操作模式是不需要滾動條的，
那問題來了，
咋整能區(qū)分PC和移動端呢？
媒體查詢，yes；@media，YYDS
完整Demo
HTML部分：
JS部分：
CSS部分：
推廣：個人Gitee倉庫地址：gitee.com/swz082421
倉庫里面整理了Vue、Scss、ES什么的，還有個AdGuard規(guī)則
大哥大姐，覺得有用請點個星星
