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


相关推荐

  • vscode常用插件大全「建议收藏」

    vscode常用插件大全「建议收藏」vscode常用插件大全参考文章https://mp.weixin.qq.com/s/1PkWPApvn5uWJl_cdzcoTA说明该片文章基本介绍了vscode常用插件,已经很全面本文不做任何编辑器的比较,只是我本人日常使用vscode进行开发,并且比较喜欢折腾vscode,会到处找这一些好玩的插件,于是越攒越多,今天给大家推荐一下我收藏的60多个vscode插件,据说插件装太多,编辑器会变卡,可能是我的电脑配置还顶得住,目前并没有感觉到卡卡的。接下来我会将会

    2022年9月30日
    7
  • 微信小程序宠物论坛4

    微信小程序宠物论坛4微信小程序宠物论坛4帖子详情模块界面图JS部分//初始化数据化constdb=wx.cloud.database();constcont=db.collection(‘comment’);const_=db.commandPage({data:{value:”请输入评论…”,id:””,post:[],//帖子信息postid:””,//帖子IDtime:””,//时间content:”

    2022年10月7日
    2
  • 一个好玩的小游戏(纯C语言编写)

    一个好玩的小游戏(纯C语言编写)最近在看知乎是发现了一个这一个专栏https://zhuanlan.zhihu.com/c2game从中获取的许多知识,本文中的游戏也是从里面学到的,不过本人又自己加了一些功能。这是一个类似于飞机大战的游戏,不过目前代码量比较小,所以看起来非常简陋游戏界面如下更新日志,本人将原来的原来的代码有进一步的优化了一下,之前是只有一个非常小的战机现在更新后可以产生一个非常大的战机(看起来也更

    2022年5月19日
    44
  • pathname_not found in java.library.path

    pathname_not found in java.library.path|–ContextPath–|–ServletPath-|–PathInfo–|http://www.myserver.com/mywebapp/helloServlet/hello|——–RequestURI—————————-|

    2025年12月13日
    3
  • 我写的RadControls_Q1_2005注册机「建议收藏」

    我写的RadControls_Q1_2005注册机「建议收藏」有个朋友给我来信,说激活成功教程某控件时ildasm无法反汇编出il代码,我近来也遇到一些类似情况,只有试着做注册机,居然成功。想验证注册机真实性的朋友可把你的主机的ip地址暂时设为60.20.130.15试一下就知道了   control=”combobox”/>……现在急需asp.net空间,能免费提供的请与我联系 

    2022年7月19日
    18
  • java遍历数组的各种方法_遍历数组的常用方法「建议收藏」

    java遍历数组的各种方法_遍历数组的常用方法「建议收藏」1.最传统方法for循环1vararr=[“first”,”second”,”third”,”fourth”,3,5,8];2for(vari=0;i<arr.length;i++){3console.log(arr[i]);4}5//输出:6first7second8third9fourth10311512…

    2025年12月6日
    3

发表回复

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

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