今天遇到了一个关于滚动条的问题,为了处理这个问题整整试了一上午,,印象深刻,遂作此文章,以备后用。
* 子元素的宽度默认会撑满父元素的宽度
* 没有滚动条时
子元素宽度 = 父元素宽度
* 有滚动条时
父元素的有效宽度会变小
父元素宽度 = 原父元素宽度 - 滚动条宽度
* 因此子元素重新调整宽度
子元素宽度 = 原父元素宽度 - 滚动条宽度
* 此时子元素明显会因为宽度变小而重新调整布局, 所以发生了挤压.
明白了前因后果, 就很好找解决方案了.
只要预留出滚动条的空间, 让子元素的宽度在有滚动条和没有滚动条时不发生变化就可以了.
* 方式一: 限定内层元素的最大宽度以预留出滚动条的宽度
实 现: max-width: calc(300px - 17px); /* 父元素宽度 - 滚动条宽度 */
* 方式二: 让内层元素的最小宽度占满父元素, 通过 padding 预留出滚动条的宽度
实 现: min-width: 300px; /* 父元素宽度 */
padding-right: 17px; /* 滚动条宽度 */
box-sizing: border-box; /* 让元素宽度包含 padding, 否则元素会被滚动条遮挡 */
PS: 方式一和方式二的实现效果有细微的差别, 大家请根据实际需求来选择.
webkit内核的浏览器滚动条样式优化
.img-ul::-webkit-scrollbar {/*滚动条整体样式*/
width: 2px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.img-ul::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
background: #1f1f1f;
}
.img-ul::-webkit-scrollbar-track {/*滚动条里面轨道*/
background: #e6e6e6;
}