当前位置: 首页 > news >正文

开发指南107-谷歌内核浏览器滚动条设置

平台上统一制定了滚动条样式(仅限于webkit内核):

/* ------美化谷歌浏览器滚动条  开始-----------*/

::-webkit-scrollbar{width:12px;height:12px;background-color: #E1E1E1;}

::-webkit-scrollbar-button:single-button {

    background-color:#E1E1E1;

    display: block;

    background-size: 10px;

    background-repeat: no-repeat;

}

::-webkit-scrollbar-button:single-button:vertical:decrement {

    height: 12px;

    width: 12px;

    background-position: center 4px;

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='50,00 0,50 100,50'/></svg>");

}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='50,00 0,50 100,50'/></svg>");

}

::-webkit-scrollbar-button:single-button:vertical:decrement:active {

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='50,00 0,50 100,50'/></svg>");

}

::-webkit-scrollbar-button:single-button:vertical:increment {

    height: 12px;

    width: 12px;

    background-position: center 2px;

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 100,0 50,50'/></svg>");

}

::-webkit-scrollbar-button:single-button:vertical:increment:hover {

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,0 100,0 50,50'/></svg>");

}

::-webkit-scrollbar-button:single-button:vertical:increment:active {

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 100,0 50,50'/></svg>");

}

::-webkit-scrollbar-button:single-button:horizontal:decrement {

    height: 12px;

    width: 12px;

    background-position: 3px 3px;

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,50 50,100 50,0'/></svg>");

}

::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,50 50,100 50,0'/></svg>");

}

::-webkit-scrollbar-button:single-button:horizontal:decrement:active {

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,50 50,100 50,0'/></svg>");

}

::-webkit-scrollbar-button:single-button:horizontal:increment {

    height: 12px;

    width: 12px;

    background-position: 3px 3px;

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 0,100 50,50'/></svg>");

}

::-webkit-scrollbar-button:single-button:horizontal:increment:hover {

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,0 0,100 50,50'/></svg>");

}

::-webkit-scrollbar-button:single-button:horizontal:increment:active {

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 0,100 50,50'/></svg>");

}

::-webkit-scrollbar-track{

    background-color: #E1E1E1;

}

::-webkit-scrollbar-track-piece{background-color:#E1E1E1;}

::-webkit-scrollbar-thumb{background-color:#B4B4B4;border-radius:6px}

::-webkit-scrollbar-thumb:hover{background-color:#858585;}

::-webkit-scrollbar-corner{background-color:#E1E1E1}

/*---------- 美化谷歌浏览器滚动条  结束-----------*/

其中最复杂的部分是定义滚动条两端的箭头

http://www.dtcms.com/a/59806.html

相关文章:

  • 开发过程中遇到的问题记录
  • 011---UART协议的基本知识(一)
  • Tensorflow 2.0 GPU的使用与限制使用率及虚拟多GPU
  • 计算机视觉算法实战——野猪检测(主页有源码)
  • 【2025年27期免费获取股票数据API接口】实例演示五种主流语言获取股票行情api接口之沪深A股跌停股池数据获取实例演示及接口API说明文档
  • 虚函数和虚表的原理是什么?
  • Deepseek中的MoE架构的改造:动态可变参数激活的MoE混合专家架构(DVPA-MoE)的考虑
  • 【算法day5】最长回文子串——马拉车算法
  • 静态网页的爬虫(以电影天堂为例)
  • Git学习笔记(二)
  • 大白话react第十八章React 与 WebGL 项目的高级拓展与优化
  • Unity之如何实现哔哩哔哩直播弹幕游戏
  • docker本地部署RagFlow
  • Java集合框架全解析:从数据结构到高并发简单解析
  • 技术周总结 03.03 - 03.09 周日(Java监控 SpringAI)
  • PY32MD320单片机 QFN32封装,内置多功能三相 NN 型预驱。
  • 在github action工作流使用nw和nw-builder打包
  • 读书报告」网络安全防御实战--蓝军武器库
  • 【jstack查询线程信息】1.对比下arthas的thread 和jvm指令
  • linux下 jq 截取json文件信息
  • 前端数据模拟利器 Mock.js 深度解析
  • Etcd学习笔记
  • 通过一篇文章让你稳过计算机二级(C语言)
  • 为wordpress自定义一个留言表单并可以在后台进行管理的实现方法
  • 火语言RPA--指定PDF页另存为图片
  • Redis客户端
  • swift-5-汇编分析闭包本质
  • 2025年基于Zabbix主动发现机制实现Nacos服务动态监控
  • vue3中使用h()函数加载elementPlus 组件
  • 3个 Vue Scoped 的核心原理