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)
上一篇 2022年7月4日 下午4:00
下一篇 2022年7月4日 下午4:00


相关推荐

  • MPU6050开发 — 数据分析

    MPU6050开发 — 数据分析如需转载请注明出处 https blog csdn net article details 上一篇文章结尾 留了一些思考问题 现在只是得到 MPU6050 的一些原始数据 还未做滤波处理 接下来先讲 加速度计和陀螺仪的计算公式 然后进一步延伸出姿态滤波 一 加速度计 1 计算公式参看 Arduino 教程 MPU6050 的数据获取 分

    2026年3月16日
    2
  • activiti 生命周期_activiti教程

    activiti 生命周期_activiti教程activiti工作流的web流程设计器整合视频教程SSM和独立部署本视频为activiti工作流的web流程设计器整合视频教程整合Acitiviti在线流程设计器(Activiti-Modeler5.21.0官方流程设计器)本视频共讲了两种整合方式1.流程设计器和其它工作流项目分开部署的方式2.流程设计器和SSM框架项目整合在一起的方式视频大小…文章风火轮12017-04-0511…

    2022年7月21日
    17
  • 自定义浏览器滚动条样式

    自定义浏览器滚动条样式感谢刘洋的分享 https www lyblog net detail 314 html 自定义 IE 浏览器滚动条样式滚动条样式支持情况支持浏览器版本可否继承描述 scrollbar 3dlight colorIE 特有属性 IE5 5 y 设置滚动框的和滚动条箭头左上边缘的颜色 scrollbar highlight c

    2025年12月14日
    7
  • idea vim 配置[通俗易懂]

    idea vim 配置[通俗易懂]imapjkimapkjsettimeoutlen=300setkeep-english-in-normal-and-restore-in-insertsetkeep-english-in-normalsetclipboard=unnamedsetignorecase

    2022年9月30日
    7
  • 什么对山峰正如低陷对山谷_bfs系列

    什么对山峰正如低陷对山谷_bfs系列FGD小朋友特别喜欢爬山,在爬山的时候他就在研究山峰和山谷。为了能够对旅程有一个安排,他想知道山峰和山谷的数量。给定一个地图,为FGD想要旅行的区域,地图被分为 n×n 的网格,每个格子 (i,j) 的高度 w(i,j) 是给定的。若两个格子有公共顶点,那么它们就是相邻的格子,如与 (i,j) 相邻的格子有(i−1,j−1),(i−1,j),(i−1,j+1),(i,j−1),(i,j+1),(i+1,j−1),(i+1,j),(i+1,j+1)。我们定义一个格子的集合 S 为山峰(山谷)当且仅当:

    2022年8月8日
    7
  • table文字水平垂直居中

    table文字水平垂直居中lt table gt nbsp nbsp lt tr gt nbsp nbsp nbsp nbsp lt tdstyle text align center vertical align middle gt nbsp nbsp nbsp nbsp nbsp nbsp 文字内容 nbsp nbsp nbsp nbsp nbsp nbsp text align center 设置水平居中 nbsp nbsp nbsp nbsp nbsp nbsp vertical align middle 设置垂直居中 nbsp nbsp nbsp nbsp

    2025年12月14日
    6

发表回复

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

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