文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS修改浏览器滚动条样式的方法

2024-04-02 19:55

关注

这篇文章主要介绍“CSS修改浏览器滚动条样式的方法”,在日常操作中,相信很多人在CSS修改浏览器滚动条样式的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS修改浏览器滚动条样式的方法”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

    我们在自定义滚动条样式前,首先要了解滚动条的结构。通俗来讲,滚动条由两部分组成:一部分是可以滑动的部分,我们称它为滑块;另一部分是滚动条的轨道,也就是滑块的轨道,一般来说,为了美观,滑块的颜色要比轨道的颜色深一些。

    首先介绍滚动条相关的CSS代码,以及他们的含义

    ::-webkit-scrollbar:指滚动条整体部分,它的属性有width,height,background等

    ::-webkit-scrollbar-button:指滚动条两边的按钮。当不需要时可以用display:none将其隐藏

    ::-webkit-scrollbar-track:指外层轨道部分,当不需要时可以用display:none将其隐藏,也可以添加你想要的颜色

    ::-webkit-scrollbar-track-piece:指内层轨道部分,即滚动条中间的部分

    ::-webkit-scrollbar-thumb:指滚动条里面可以拖动的部分,也就是滑块

    ::-webkit-scrollbar-corner:指边角部分

    ::-webkit-resizer:他用来定义右下角滑块的样式

    但是最常用的是滚动条整体部分(-webkit-scrollbar),滑块(-webkit-scrollbar-thumb)以及外轨道(-webkit-scrollbar-track)三部分。

    接下来我们将div盒子里面超出的部分隐藏,给div设置滚动条样式,看看怎么用CSS实现滚动条样式。

    HTML部分:

    <divclass="scroll">

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    haveaniceday<br/>

    </div>

    CSS部分:

    .scroll{

    margin:100pxauto;

    border:1pxsolid#000;

    width:200px;

    height:300px;

    overflow:auto;

    }

    .scroll::-webkit-scrollbar{

    width:10px;

    height:10px;

    }

   

    .scroll::-webkit-scrollbar-thumb{

    background-color:rgba(0,0,0,.05);

    border-radius:10px;

    -webkit-box-shadow:inset1px1px0rgba(0,0,0,.1);

    }

   

    .scroll:hover::-webkit-scrollbar-thumb{

    background-color:rgba(0,0,0,.2);

    border-radius:10px;

    -webkit-box-shadow:inset1px1px0rgba(0,0,0,.1);

    }

   

    .scroll::-webkit-scrollbar-thumb:hover{

    background-color:rgba(0,0,0,.4);

    -webkit-box-shadow:inset1px1px0rgba(0,0,0,.1);

    }

   

    .scroll::-webkit-scrollbar-track{

    border-radius:10px;

    -webkit-box-shadow:inset006pxrgba(0,0,0,0);

    background-color:white;

    }

   

    .scroll::-webkit-scrollbar-track:hover{

    -webkit-box-shadow:inset006pxrgba(0,0,0,.4);

    background-color:rgba(0,0,0,.01);

    }
CSS修改浏览器滚动条样式的方法

到此,关于“CSS修改浏览器滚动条样式的方法”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯