2023年6月20日发(作者：)

css隐藏div滚动条记录⼀下⽇常开发...之前开发隐藏

div 滚动条，都是通过设置外出

div 为

overflow: hidden, 然后设置内层

div 的宽度略⼤于外层

div，这种做法限制很多，需要确定内外层

div 的宽度，没办法⾃适应多种分辨率的屏幕，⽽且开发调试起来很⿇烦。总结⼀下，隐藏div滚动条的⼏种⽅式1. css设置（推荐）div { max-height: 100px; overflow: auto; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE 10+, edge */ &::-webkit-scrollbar { display: none; /* Chrome Safari */ // 或者 width: 0; }}2. 通过div 嵌套隐藏

...
.outer { width: 500px; height: 100px; position: relative; overflow: hidden;}.inner { height: 100px; position: absolute; left: 0; top: 0; // 滚动条宽度差不多 17px width: ~'calc(100% + 17px)'; // 或者 right: -17px; bottom: 0; overflow-y: scroll; overflow-x: hidden;}

2023年6月20日发(作者：)

css隐藏div滚动条记录⼀下⽇常开发...之前开发隐藏

div 滚动条，都是通过设置外出

div 为

overflow: hidden, 然后设置内层

div 的宽度略⼤于外层

div，这种做法限制很多，需要确定内外层

div 的宽度，没办法⾃适应多种分辨率的屏幕，⽽且开发调试起来很⿇烦。总结⼀下，隐藏div滚动条的⼏种⽅式1. css设置（推荐）div { max-height: 100px; overflow: auto; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE 10+, edge */ &::-webkit-scrollbar { display: none; /* Chrome Safari */ // 或者 width: 0; }}2. 通过div 嵌套隐藏

...
.outer { width: 500px; height: 100px; position: relative; overflow: hidden;}.inner { height: 100px; position: absolute; left: 0; top: 0; // 滚动条宽度差不多 17px width: ~'calc(100% + 17px)'; // 或者 right: -17px; bottom: 0; overflow-y: scroll; overflow-x: hidden;}