首页 > 其他分享 >css设置竖向滚动条样式

css设置竖向滚动条样式

时间:2024-04-25 16:55:40浏览次数:20  
标签:divId 滚动条 竖向 scrollbar background webkit border css

divId 为 div 标签的 id,内容过多,会出现竖向滚动条。

<div id="divId">xxx</div>

设置滚动条样式:

/* 设置滚动条的样式 */
#divId::-webkit-scrollbar{
    width: 10px;
    box-sizing: border-box;
}
/* 滚动条滑块 */
#divId::-webkit-scrollbar-thumb {
    height: 5px;
    border-radius: 5px;
    background-color: #c2cede;
}
/*滚动槽*/
#divId::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);
    border-radius: 10px;
    background: #ffffff;
}
/* 滚动条滑块 鼠标悬浮 */
/* #divId::-webkit-scrollbar-thumb:hover {
    background-color: #F6F6F6;
    border: 1px solid rgba(0, 0, 0, 0.21);
} */

 

标签:divId,滚动条,竖向,scrollbar,background,webkit,border,css
From: https://www.cnblogs.com/smile-fanyin/p/18158073

相关文章

  • 一些css样式
    伪类使用:.active鼠标点击时的样式--a:link{color:#000000;}/*未访问链接*/a:visited{color:#00FF00;}/*已访问链接*/a:hover{color:#FF00FF;}/*鼠标移动到链接上*/a:active{color:#0000FF;}/*鼠标点击时*/cursor:pointer;可点击的光标样式--cursor:de......
  • CSS-vmin&vmax单位
    vmin和vmax单位vmin是相对于视口宽度和高度中较小值进行计算,它的值为视口宽度和高度中的较小值的百分比。例如,如果视口宽度为800px,高度为1000px,那么1vmin等于8px(800px的1%)。vmax是相对于视口宽度和高度中较大值进行计算,它的值为视口宽度和高度中的较大值的百分比。......
  • table固定表头和列 css实现表格固定表头
    Hello,大家好,我是站长鹏仔,本次鹏仔开发的项目中,实现出功能如图所示,固定表格的头部和左侧,在超出时滚动条滚动悬浮,之前给大家写过一次表格表头固定,是用占位的方式(https://www.sharedbk.com/post/178.html),太麻烦了,本次给大家分享一个更简单的方法。本次主要用到的css属性是粘性定位......
  • 聊聊css中的BFC
    BFC,即BlockFormattingContext(块级格式化上下文),是CSS布局的一部分,用于确定块级盒子的布局及其在页面上的排列方式。BFC是一个独立的布局环境,其中的元素布局不受外部元素的影响,并且它们之间的布局不会互相影响。在一个BFC中,每个盒子按照垂直方向一个接一个地放置。具体来说......
  • 持续性学习-Day15(前端基础CSS3)
    参考教学视频:秦疆1.什么是CSSCascadingStyleSheet层叠样式表CSS3圆角、阴影、动画...浏览器兼容性CSS优势:内容和表现分离网页结构表现统一,可以实现复用样式十分的丰富建议使用独立html的css文件利用SEO,容易被搜索引擎收录2.入门<linkrel="styleshee......
  • 文字动态地变大变小(CSS)
    要在CSS中动态地改变文字大小,可以使用@keyframes规则创建一个动画,然后将该动画应用到需要改变大小的文本元素上。以下是一个示例,演示如何使文字大小在一定时间内从小变大,然后再变小:css部分:/*定义一个名为resizeText的动画*/@keyframesresizeText{0%{font-si......
  • CSS之定位Position
    前言之前在《CSS之浮动》中,我当时是想一起说说定位的,因为我在很多地方看到有把float和position放在一起讲的,说它们的一些属性值可以使元素脱离文档流,但是没想到在准备内容的时候,发现浮动的内容有点多,就先把浮动的内容单独整了一篇。本文就继续来说说定位吧。基本信息Name:p......
  • Django不显示CSS的效果(基于Django模板的静态资源配置问题)
    在搞毕设过程中,习惯起见我直接在网上找了现成的前端设计页面,如图:这种前端项目的结构一般是一个login.html、一个style.css、一个背景图片即可搞定的,直接点击html,浏览器中打开的就是上图所示的界面效果。但是:当我把前端所有文件扔进DjangoApp的templates文件夹后,运行项目的效果......
  • css3多行文本多行文本缩略点击更多展开显示全部
    比如我要实现如下效果:数据集名称展示一行,超出自动省略,末尾增加编辑icon。点击编辑的icon,换成input输入框数据集描述最多展示三行,超出自动省略。末尾增加编辑icon。点击编辑的icon,换成textarea输入框展示一行省略+icon实现单行省略实现,无非是这样<div class="flex-row al......
  • c# 中 dataGridView控件 显示水平滚动条
    1.最主要的在dataGridView控件属性中的ScrollBars是否设为BothBoth代表水平和垂直方向根据实际需求自动显示滚动条None代表水平和垂直都不显示滚动条Vertical代表只垂直显示滚动条Horizontal代表只水平显示滚动条2.检查表格中每个列的属性,看Frozen应设置为false 如果......