滚动条 scrollbar 和scrollbar-thumb 样式

效果图如下

具体代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{height: 400px;width: 400px;background-color: aquamarine;overflow-y: scroll;}.box p{height: 150px;}/*修饰滚动条写法*/.box::-webkit-scrollbar {background-color: rgb(122, 178, 238);width: 20px;}.box::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgb(19, 80, 142);width: 11px;}</style>
</head>
<body><div class="box"><p>小李子</p><p>小李子</p><p>小李子</p><p>小李子</p></div>
</body>
</html>

滚动条 scrollbar 和scrollbar-thumb 样式相关推荐

自定义滚动条修改x和y轴滚动条交叉地方的css样式
自定义滚动条修改x和y轴滚动条交叉地方的css样式 ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处修改background背景色
自定义滚动条使用（scrollbar样式设置）
转自:https://segmentfault.com/a/1190000012800450 PS:非商业用途,如有侵权,请联系删除. 一前言在CSS 中,如果我们在块级容器上设置了属性: ove ...
html 占用空间滚动轴_滚动条占据空间scrollbar导致的bug
背景这一个因为滚动条占据空间引起的bug, 查了一下资料, 最后也解决了,顺便研究一下这个属性, 做一下总结,分享给大家看看. 正文昨天, 测试提了个问题, 现象是一个输入框的聚焦提示偏了, 让我 ...
关于ie，火狐，谷歌浏览器滚动条的隐藏以及自定义样式
最近做了一个项目,要求各个浏览器统一滚动条的样式,不显示滚动条,但是不影响鼠标的滑动事件. 查了很多资料,ie和谷歌都是可以自定义滚动条样式的,但是ie只能改变颜色,并不能修改宽度,圆角之类的.谷歌就 ...
Scrollbar浏览器滚动条样式美化-知识点-案例
知识点罗列简介首先需要介绍一下滚动条的组成部分.滚动条包含 track 和 thumb track是滚动条的基础,其中的 thumb是用户拖动支页面或章节内的滚动还有一件重要的事情要记住,滚动条 ...
QML QtQuick.Controls 2 ScrollBar滚动条样式自定义
测试版本:Qt5.12及Qt5.15 ,参考Qt源码及文档示例代码链接:https://github.com/gongjianbo/QmlComponentStyle.git 自定义样式与默认样式的 ...
前端自定义设置各浏览器滚动条scrollbar样式的方法
有时候项目里 UI 的需求是改滚动条的样式 ,css 就可以改下面这篇文章主要就是介绍了前端如何来修改各大浏览器的滚动条样式,首先要知道,修改滚动条样式,其一是利用伪元素 -webkit-scro ...
ScrollBar(滚动条)的实现尝试
[写在前面] 最近项目中需要用到滚动条,然后尝试了不少方法: 比如使用 overflow: scroll,但感觉不好控制,效果也不怎么满意. 然后,自己就想着进行简单的实现,这里就讲解一下当时的实现思 ...
javascript滚动条之ScrollBar.js
ScrollBar.js是一个仅仅120行的滚动条JS插件,使用非常方便详情阅读:https://git.oschina.net/wuquanyao/scrollbar.js/*========== ...
自定义浏览器滚动条的样式，详细讲解
CSS3自定义滚动条样式 -webkit-scrollbar 有时候觉得浏览器自带的原始滚动条不是很美观,那webkit浏览器是如何自定义滚动条的呢? Webkit支持拥有overflow属性的区域, ...

滚动条 scrollbar 和scrollbar-thumb 样式

效果图如下

具体代码如下

滚动条 scrollbar 和scrollbar-thumb 样式相关推荐

最新文章

热门文章