乖兔博客

乖兔 > CMS系统 > CSS > 纯css修改浏览器scrollbar滚动条样式

纯css修改浏览器scrollbar滚动条样式

乖兔 更新于: 2020-11-30 分类:CSS

css修改浏览器滚动条样式和颜色.png

把网站前台的UI设计好之后,前台去浏览,有时候总觉得怪怪的。最后发现问题是因为浏览器的滚动条不协调导致的。而且,不同浏览器的滚动条还有很多差别。

这里,我们可以通过css修改浏览器scrollbar滚动条样式的方法,让页面更加美观舒适。

纯css修改浏览器scrollbar滚动条样式代码:

::-webkit-scrollbar {
  width: .5rem;
  height: .5rem;
  background: hsla(0, 0%, 100%, 0.6);
}

::-webkit-scrollbar-track {
  border-radius: 0;
}

::-webkit-scrollbar-thumb {
  border-radius: 0;
  background-color: rgba(95,95,95,.4);
  transition: all .2s;
  border-radius: .5rem;

  &:hover {
    background-color: rgba(95,95,95, .7);
  }
}

将以上代码直接放到的css文件里面,刷新下页面即可看到新的滚动条效果。


打赏