div滚动条

div滚动条##设置div内容溢出滚动overflower:auto(内容溢出的时候出现滚动条;scroll会一直出现滚动条)#滚动条样式##滚动条组成:-webkit-scrollbar滚动条整体部

大家好,又见面了,我是你们的朋友全栈君。

设置div内容溢出滚动

overflower:auto(内容溢出的时候出现滚动条;scroll会一直出现滚动条)

滚动条样式

滚动条组成:

  • -webkit-scrollbar 滚动条整体部分
  • -webkit-scollbar-thumb  滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)
  • -webkit-scrollbar-track  滚动条的轨道(里面装有Thumb)
  • -webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
  • -webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
  • -webkit-scrollbar-corner 边角,即两个滚动条的交汇处
  • -webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

简洁版

/定义滚动条高宽及背景 高宽 分别对应 横竖 滚动条的尺寸/

.scroll::-webkit-scrollbar
{
  width: 5px;
  height: 8px;
  background: #f5f5f5;
}

/*定义滚动条轨道 内阴影+圆角*/
.scroll::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  border-radius: 10px;
  background: #23aaaa;
}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/154302.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • android反编译apk_apk反编译找不到

    android反编译apk_apk反编译找不到反编译代码:1、解压apk得到class.dex2、dex2jar.bat class.dex3、用Javadecompiler查看编译出来的*.jar文件就可以看到代码反编译资源文件:1、apktool.bat d *.apk  APKTool是GOOGLE提供的APK编译工具,需要JAVA运行环境,推荐使用JDK

    2022年9月17日
  • Javascript-判断是否为数组的5种方法

    Javascript-判断是否为数组的5种方法判断是否为数组的5种方法1instanceof2constructor3Array.isArray()最推荐方法4typeof5Object.prototype.toSrtring.call()总结vararr=[1,1,1,1]vara=’2323’varb={name:’xiao’,age:12}varn=11instanceof1instanceof运算符用于检验构造函数的prototype属性是否出现在对象的原型链中的任何位置,返回一个布尔值。

    2022年10月29日
  • java dump文件分析报告_java线程dump命令

    java dump文件分析报告_java线程dump命令生产环境下,如果出现OOM情况下,如何分析Dump文件。

    2022年9月25日
  • docker五种特性_k8s docker 关系

    docker五种特性_k8s docker 关系DockerDocker网络–link自定义网络网络连通Docker网络Docker是如何进行网络通讯的?查看本机的网卡和ip地址docker0类似与路由器ip地址一样(x.x.x.1)Dockerdocker run -d -P –name=tomcat03 tomcat:8.0查看容器ip地址docker exec -it a72d4ae634da ip addr1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noque

    2022年8月9日
  • linux nohup命令输出日志_nohup运行sh文件

    linux nohup命令输出日志_nohup运行sh文件(一)前言因为经常使用Xshell进行服务器代码的运行,但是每次到关机后,或者是关掉Xshell连接窗口,在服务器上的命令,操作也就断掉了。这不得不找到了一个Linux命令:nohup(二)基本用法nohupcommand[arg…][&amp;]拿pythontest.py为例子一般我们运行命令是直接:pythontest.py,但是在xshel…

    2022年8月29日
  • 【原创】异步FIFO设计原理详解 (含RTL代码和Testbench代码)

    【原创】异步FIFO设计原理详解 (含RTL代码和Testbench代码)FIFO在硬件上是一种地址依次自增的SingleDulRAM,按读数据和写数据工作的时钟域是否相同分为同步FIFO和异步FIFO,其中同步FIFO是指读时钟和写时钟为同步时钟,常用于数据缓存和数据位宽转换;异步FIFO通常情况下是指读时钟和写时钟频率有差异,即由两个异步时钟驱动的FIFO,由于读写操作是独立的,故常用于多比特数据跨时钟域处理。本文仅讨论异步FIFO的设计。因为FIFO的硬件本质是一块SingleDulRAM,无论它的内部结构和原理如何复杂,最核心的…

    2022年8月13日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号