滚动条的归属

1. Chrome中滚动条属于开启overflow的元素的父元素

2. Firefox中滚动条属于开启overflow的元素

举个例子：

以上结构中，要想改动滚动条的样式在Chrome和Firefox中分别需要这样写：

• Chrome中

• Firefox中

注意！！！

100版本的Firefox对默认的滚动条做了修改，以上只有scrollbar-width:none;能生效。

滚动条的布局

上面说过，Chrome中滚动条属于开启overflow的元素的父元素，

但是！！！

在进行布局运算的时候，仍把滚动条视作开启overflow的元素的子元素

Firefox的新滚动条（100版本以上）不会出现这个问题

问题

如果网页中有多个行，有的有滚动条，有的没有

作为一个前端，这种时候不可能挨个给每个行单独写样式，因为页面是根据后端给的数据来渲染的，今天数据少不需要条，明天可能数据就多了，不可能数据库里的数据一变就通知前端改样式

理想的情况是Firefox中展示的样子

解决方案

那么问题来了，

Chrome要怎么实现Firefox中那样的情况呢？

MDN走起

注意！！！

Firefox是不支持这个属性值的，为了兼容性考虑，CSS要这样写

浏览器支持的时候取下面那条，不支持的时候取上面那条

移动端

众所周知，移动端的操作模式是不需要滚动条的，

那问题来了，

咋整能区分PC和移动端呢？

媒体查询，yes；@media，YYDS

完整Demo

HTML部分：

JS部分：

CSS部分：

推广：个人Gitee仓库地址：gitee.com/swz082421

仓库里面整理了Vue、Scss、ES什么的，还有个AdGuard规则

大哥大姐，觉得有用请点个星星