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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • axis2开发webservice_docker映射出来端口访问不了

    axis2开发webservice_docker映射出来端口访问不了记录一次正式环境服务报错排查记录。某日被通知线上服务告警,错入日志全是Timeoutwaitingforconnection首先梳理项目架构,项目很简单,就是一个使用axis2构建的webserice的客户端开始从此段报错入手排查,定位到MultiThreadedHttpConnectionManager这个类的doGetConnection方法privateHttpConnectiondoGetConnection(HostConfigurationhostCo.

    2022年9月12日
    0
  • js获取当前日期并格式化_json格式怎么打开

    js获取当前日期并格式化_json格式怎么打开js获取当前时间并转化格式效果图:代码:vara=newDate()varb=a.toLocaleTimeString();//输出时分秒varc=a.toLocaleDateString();//输出年月日vard=c.split(“/”);if(d[1]<10){d[1]=’0’+d[1]}co

    2022年9月14日
    0
  • Spring Boot -01- 快速入门篇(图文教程)「建议收藏」

    SpringBoot-01-快速入门篇今天开始不断整理SpringBoot2.0版本学习笔记,大家可以在博客看到我的笔记,然后大家想看视频课程也可以到【慕课网】手机app,去找【SpringBoot2.0深度实践】的课程,令人开心的是,课程完全免费!什么是SpringBoot?SpringBoot是由Pivotal团队提供的全新框架。SpringBoot…

    2022年4月16日
    29
  • 论文文献阅读笔记_IN characteristic of learning

    论文文献阅读笔记_IN characteristic of learningMGN的核心思想是利用globalfeature+finegrainfeature做特征融合然后分类,做part-based的branch取得很简单就是等分,但是为了让模型能收敛,用了多个patch的loss混合训练。看文章结果很不错,只用了给的数据集里面的trainset就能达到90+。github上只有pytorch版本,准备这段时间自己搞一个纯TF版本出来。Motivatio…

    2022年9月27日
    1
  • css animation动画(css3动画分享)

    css3小动画,实在是丰富了前端展示页面的效果。虽然IE8不兼容(爱兼容不兼容,奏是这么傲娇)。但是在谷歌,火狐表现都没差。今天就介绍一个css3动画小插件,分分钟满足你实现各种妖魔化动画效果。1.需要引入css文件:animate.css2.引入js文件:wow.min.js3.找到页面中需要添加动画的元素添加class;比如:wowfadeInRightanimatedan…

    2022年4月15日
    64
  • ebpf_ebpf需要修改内核吗

    ebpf_ebpf需要修改内核吗eBPF简史BPFBPF的全称是BerkeleyPacketFilter,顾名思义,这是一个用于过滤(filter)网络报文(packet)的架构。过滤(Filter):根据外界输入的规则过滤报文;复制(Copy):将符合条件的报文由内核空间复制到用户空间;?packet报文buffer百度百科在计算机领域,缓冲器指的是缓冲寄存器,它分输入缓冲器和输出缓冲器两种。前者的作用是将外设送来的数据暂时存放,以便处理器将它取走;后者的作用是用来暂时存放处理器送往外设的数据。有了数控缓冲器,

    2022年9月21日
    0

发表回复

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

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