CSS自定义滚动条样式

作者: LuckyJin | 来源:发表于2018-10-24 14:31 被阅读0次

CSS3自定义滚动条样式
微信小程序scroll-view隐藏滚动条
CSS设置滚动条样式
css3自定义样式滚动条
vue 项目中自定义scroll样式
css 设置 overflow:scroll 滚动条的样式
4.1 CSS书写规范
自定义滚动条样式、ios非body滚动元素滚动条不流畅
DIV滚动条添加css显示和滚动条隐藏
滚动条默认样式修改

代码:
如果加在局部，可以在前面加上类

.level ::-webkit-scrollbar{
}

/*滚动条样式*/
::-webkit-scrollbar {/*滚动条整体样式*/
  width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 6px;
}
::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: rgba(0,0,0,0.2);
}
::-webkit-scrollbar-track {/*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 0;
  background: rgba(0,0,0,0.1);
}

效果:

滚动条.png

CSS3自定义滚动条样式
本文来自：CSS3自定义滚动条样式自定义滚动条实现此部分针对webkit内核的浏览器，使用伪类来改变滚动条的默...
微信小程序scroll-view隐藏滚动条
将下面代码添加到 wxss文件中去：更多关于滚动条的设置参看：CSS3自定义滚动条样式 -webkit-scro...
CSS设置滚动条样式
CSS设置滚动条样式一：webkit下面的CSS设置滚动条 ::-webkit-scrollbar 滚动条整体部...
css3自定义样式滚动条
CSS3自定义滚动条样式 -webkit-scrollbar 有时候觉得浏览器自带的原始滚动条不是很美观，那web...
vue 项目中自定义scroll样式
css3中可以设置滚动条的样式，但是兼容性一直被受争议，偶然看到一个css+js 的方式自定义一个滚动条，现在把他...
css 设置 overflow:scroll 滚动条的样式
css 设置overflow:scroll 滚动条的样式
4.1 CSS书写规范
全局CSS样式 CSS样式可细分为3类：自定义样式、重新定义HTML样式、链接状态样式。自定义样式为设计师自定义...
自定义滚动条样式、ios非body滚动元素滚动条不流畅
自定义滚动条样式 ios非body滚动元素滚动条不流畅
DIV滚动条添加css显示和滚动条隐藏
对div设置滚动条，设置其横向滚动条和纵向滚动条样式。所需CSS样式为overflow-y和overflow-x来...
滚动条默认样式修改
标签（空格分隔）： css 浏览器自带滚动条总是不能够完全适应项目的样式，修改滚动条样式