记录一下日常开发...
之前开发隐藏 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 嵌套隐藏
<div class="outer">
<div class="inner">
...
</div>
</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;
}