滚动条

1.IOS 手机容器滚动条滑动不流畅

overflow:auto;

-webkit-overflow-scrolling:touch;

2.修改滚动条样式

隐藏div元素的滚动条

div::-webkit-scrollbar{
      display: none;
}

div::-webkit-scrollbar滚动条整体部分

div::-webkit-scrollbar-thumb滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条

div::-webkit-scrollbar-track滚动条的轨道(里面装有Thumb

div::-webkit-scrollbar-button滚动条的轨道的两端按钮,允许通过点击微调小方块的位置

div::-webkit-scrollbar-track-piece内层轨道,滚动条中间部分(除去

div::-webkit-scrollbar-corner边角,即两个滚动条的交汇处

div::-webkit-resizer两个滚动条的交汇处上用于通过拖动调整元素大小的小控件注意此方案有兼容性问题,一般需要隐藏滚动条时我都是用一个色块通过定位盖上去,或者将子级元素调大,父级元素使用overflow-hidden截掉滚动条部分。暴力且直接。

你可能感兴趣的:(滚动条)