浏览器滚动条的处理

今天遇到了一个关于滚动条的问题，为了处理这个问题整整试了一上午，，印象深刻，遂作此文章，以备后用。

* 子元素的宽度默认会撑满父元素的宽度
* 没有滚动条时
  子元素宽度 = 父元素宽度
* 有滚动条时
  父元素的有效宽度会变小
  父元素宽度 = 原父元素宽度 - 滚动条宽度

* 因此子元素重新调整宽度
  子元素宽度 = 原父元素宽度 - 滚动条宽度
* 此时子元素明显会因为宽度变小而重新调整布局, 所以发生了挤压.


明白了前因后果, 就很好找解决方案了.
只要预留出滚动条的空间, 让子元素的宽度在有滚动条和没有滚动条时不发生变化就可以了.


* 方式一: 限定内层元素的最大宽度以预留出滚动条的宽度
  实  现: 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;
}