移动端滚动条样式修改及隐藏

样式修改

::-webkit-scrollbar {
    width:8px; 
    height:14px; 
}
::-webkit-scrollbar-button {
    display:none;
}
::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece {
    background:-webkit-gradient(linear, left top, right top, from(#f6f6f6), color-stop(50%, #fff), color-stop(75%, #fff), to(#fdfdfd));
    width:11px;
    height:11px;
}
::-webkit-scrollbar-thumb {
    border-width:0;
    border-style:solid;
    border-radius:6px;
    background:#d9d9d9;
}
::-webkit-scrollbar-thumb:horizontal {
    border-width:3px 0;
    border-style:solid;
    border-color:#fefefe;
    border-radius:6px;
    background:#d9d9d9;
}
::-webkit-scrollbar-thumb:hover {
    background:#bdbdbd;
}
::-webkit-scrollbar-thumb:active {
    background:#8e8e8e;
}

滚动条隐藏

::-webkit-scrollbar {
  display: none !important;
  width: 0px;
  height: 0px;
}

你可能感兴趣的:(移动端滚动条样式修改及隐藏)