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

4个纯CSS自定义的简单而优雅的滚动条样式

今天发现 uni-app 项目的滚动条不显示,查了下原来是设置了

::-webkit-scrollbar {display: none;
}

那么怎么用 css 设置滚动条样式呢?

定义滚动条整体样式‌ ::-webkit-scrollbar
定义滚动条滑块样式 ::-webkit-scrollbar-thumb
定义滚动条轨道样式‌ ::-webkit-scrollbar-track

好现在推荐 4 个 css 滚动条样式

.init::-webkit-scrollbar {display: block !important;width: 10px;
}
.init::-webkit-scrollbar-thumb {border-radius: 8px;background-color: #d55959;height: 60px;
}
.init::-webkit-scrollbar-track {border-radius: 8px;background-color: #e7e7e7;border: 1px solid #cacaca;
}

.init::-webkit-scrollbar {display: block !important;background-color: #ac99ba;width: 12px;border-radius: 10px;
}
.init::-webkit-scrollbar-thumb {background-image: -webkit-gradient(linear, left bottom, left top, color-stop(.5, #a520ca), color-stop(1, #2681cc));border-radius: 10px;height: 60px;
}
.init::-webkit-scrollbar-track {border-radius: 10px;box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
}

.init::-webkit-scrollbar {display: block !important;width: 12px;
}
.init::-webkit-scrollbar-thumb {border-radius: 8px;background-color: #95a5a6;border: 1px solid #cacaca;height: 60px;
}
.init::-webkit-scrollbar-track {border-radius: 8px;background-color: #6089b0;
}

.init::-webkit-scrollbar {display: block !important;width: 16px;height: 16px;background-color: #F5F5F5;
}
.init::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);background-color: #747474;height: 60px;
}
.init::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);border-radius: 10px;background-color: #F5F5F5;
}

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

相关文章:

  • 图片压缩与尺寸调整的便捷工具推荐
  • Qt输入控件(QInput Widgets)详解:从基础到实战
  • 【leetcode】队列 + 宽搜,树形结构层序遍历的基础与变化
  • 前端开发,文件在镜像服务器上不存在问题:Downloading binary from...Cannot download...
  • JAVA设计模式——(十)抽象工厂模式(Abstract Factory Pattern)
  • PostgreSQL 的 REINDEX 命令
  • LeetCode 2071 你可以安排的最多任务数目 题解(附带自己的错误做题思路 过了25/49)
  • 个人健康中枢的多元化AI网络革新与精准健康路径探析
  • 【数据结构】励志大厂版·初阶(复习+刷题)排序
  • linux 使用nginx部署ssl证书,将http升级为https
  • CF1000E We Need More Bosses
  • 什么是DGI数据治理框架?
  • 【Python】一直没搞懂生成器是什么。。
  • Fine Structure-Aware Sampling(AAAI 2024)论文笔记和启发
  • Milvus(13):自定义分析器、过滤器
  • Prompt compress 技术探究-LLMLingua
  • 【Linux】深入理解程序地址空间
  • WPF中Behaviors
  • [特殊字符] 人工智能大模型之开源大语言模型汇总(国内外开源项目模型汇总) [特殊字符]
  • leetcode 59. 螺旋矩阵 II
  • 大连理工大学选修——图形学:第二章 计算机图形硬件及绘图系统
  • Git推送大文件导致提交回退的完整解决记录
  • 短信侠 - 自建手机短信转发到电脑上并无感识别复制验证码,和找手机输验证码说再见!
  • LLM论文笔记 28: Universal length generalization with Turing Programs
  • 365打卡第R6周: LSTM实现糖尿病探索与预测
  • idea结合CopilotChat进行样式调整实践
  • [pdf,epub]292页《分析模式》漫谈合集01-59提供下载
  • STM32Cube-FreeRTOS任务管理工具函数-笔记
  • ActiveMQ 与其他 MQ 的对比分析:Kafka/RocketMQ 的选型参考(一)
  • 个性化推荐:大数据引领电子商务精准营销新时代