自定义滚动条样式(layui.v1)

来源于 layui

css 代码

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-button,
::-webkit-scrollbar-button:vertical {
  display: none;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track:vertical {
  background-color: black;
}
::-webkit-scrollbar-track-piece {
  background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:vertical {
  margin-right: 10px;
  background-color: #a6a6a6;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:vertical:hover {
  background-color: #aaa;
}
::-webkit-scrollbar-corner,
::-webkit-scrollbar-corner:vertical {
  background-color: #535353;
}
::-webkit-scrollbar-resizer,
::-webkit-scrollbar-resizer:vertical {
  background-color: #ff6e00;
}

效果图

相关资料

  • ::-webkit-scrollbar 滚动条整体部分,其中的属性有width,height,background,border(就和一个块级元素一样)等。
  • ::-webkit-scrollbar-button 滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
  • ::-webkit-scrollbar-track 外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。
  • ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)。
  • ::-webkit-scrollbar-thumb 滚动条里面可以拖动的那部分
  • ::-webkit-scrollbar-corner 边角
  • ::-webkit-resizer 定义右下角拖动块的样式

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏游戏杂谈

CCLabelAtlas的宽度为奇数时的显示bug

遇到一个很郁闷的bug,CCLabelAtlas设置文字内容在ipad上和android上正常,就只有iphone怎么显示都不正常。后来把它宽度 + 1,然后就...

1201
来自专栏angularejs学习篇

jQuery 图片轮播的代码分离

以前遇到过jQuery实现列表自动滚动,这次的图片轮播在原理上与之相同,只有一些细微的差别,就是需要在图片的右下角显示当前图片的序号。

2992
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:用MenuView控件仿钉钉APP的首页菜单

打开集合编辑器,并点击“添加”,ID属性(用于标识菜单组),Items属性(菜单项集合),Title属性(菜单组文本),Value属性(菜单组值),如图1、图2

1462
来自专栏Python小屋

Python数据可视化案例一:自定义曲线频率、颜色与线型

下面的代码运行后,可以通过左侧的三组单选钮来设置正弦曲线的频率、颜色和线型,并根据新的设置来绘制正弦曲线,每次单击图形下方的按钮,由系统随机设置频率、颜色和线型...

3379
来自专栏互联网软件技术

图片懒加载

插件地址:https://github.com/tuupola/jquery_lazyload/tree/2.x

3163
来自专栏陈仁松博客

UWP基础教程 - RelativePanel

在Windows10 UWP开发中,新增和改变了很多特性,这次给大家介绍下RelativePanel,这个控件其实和RelativeLayout基本一种使用方式...

3505
来自专栏九彩拼盘的叨叨叨

Grid 布局写法示例

Grid 可以简便、完整、响应式地实现各种页面布局。它比 Flex 布局功能更强大。

802
来自专栏Spring相关

UI设计-详解四种布局

LinearLayout又称为线性布局,是一种非常常用的布局.这个布局会将它所包含的控件在线性方向上依次排列.

1612
来自专栏JavaEdge

CSS 全解析实战(二)-HTML基础强化1 HTML常见元素和理解(1)2 HTML常见元素和理解(2)3 HTML常见元素和理解(3)4 HTML版本5 元素分类6 嵌套关系

821
来自专栏DannyHoo的专栏

单元格的点击问题

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

1301

扫码关注云+社区

领取腾讯云代金券