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


相关推荐

  • 剑指Offer算法题

    剑指Offer算法题

    2022年3月13日
    35
  • Cocos2d-x-lua游戏两个场景互相切换MainScene01切换到MainScene02「建议收藏」

    Cocos2d-x-lua游戏两个场景互相切换MainScene01切换到MainScene02

    2022年1月21日
    37
  • matlab资产组合最优配置_最优投资组合怎么确定

    matlab资产组合最优配置_最优投资组合怎么确定您所在位置:网站首页>海量文档&nbsp>&nbsp计算机&nbsp>&nbspmatlab基于MATLAB的最优投资组合问题.pdf3页本文档一共被下载:次,您可全文免费在线阅读后下载本文档。下载提示1.本站不保证该用户上传的文档完整性,不预览、不比对内容而直接下载产生的反悔问题本站不予受理。2.该文档所得收…

    2025年7月11日
    3
  • linux运维脚本-系统登陆提示

    linux运维脚本-系统登陆提示

    2021年6月2日
    100
  • Network 之二 Ethernet(以太网)中的 MAC、MII、PHY 详解[通俗易懂]

    Network 之二 Ethernet(以太网)中的 MAC、MII、PHY 详解[通俗易懂]结构  从硬件的角度看,以太网接口电路主要由MAC(MediaAccessControl)控制器和物理层接口PHY(PhysicalLayer,PHY)两大部分构成。如下图所示  但是,在实际的设计中,以上三部分并不一定独立分开的。由于,PHY整合了大量模拟硬件,而MAC是典型的全数字器件。考虑到芯片面积及模拟/数字混合架构的原因,通常,将MAC集成进微控制器而将PHY留在片外…

    2022年9月22日
    2
  • C# 深拷贝_python的浅拷贝和深拷贝

    C# 深拷贝_python的浅拷贝和深拷贝C#中的浅复制和深复制示例在本文中,我将通过示例讨论C#中的浅拷贝和深拷贝。这是我们上一篇文章的续篇。因此,在继续本文之前,请阅读我们以前的文章,其中我们使用示例讨论了C#中的原型设计模式。浅复制和深复制在复制原型设计模式中的对象中起着重要作用。因此,在本文中,我们将通过示例讨论什么是“浅复制”和“深复制”以及它们之间的区别。了解C#中的浅表复制:如果是“浅复制”,它将从现有对象创建新对象,然后将当前对象的值类型字段复制到新对象。但是在引用类型的情况下,它将仅复制引用,而不复制被引用对象本身

    2022年9月29日
    3

发表回复

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

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