首页 > 其他分享 >css修改滚动条的样式

css修改滚动条的样式

时间:2023-08-01 11:47:31浏览次数:42  
标签:样式 0.2 滚动条 track scrollbar webkit div css

滚动条样式的修改是通过伪元素实现的:

-webkit-scrollbar ​滚动条整体部分
​-webkit-scrollbar-button​ 滚动条两端的按钮
​-webkit-scrollbar-track ​外层轨道
​-webkit-scrollbar-track-piece​ 内层轨道,滚动条中间部分(除去)
​-webkit-scrollbar-thumb​ 内嵌滑块
​-webkit-scrollbar-corner​ 边角
​-webkit-resizer ​定义右下角拖动块的样式

例子:

  div::-webkit-scrollbar {
    width: 4px;
  }
  div::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    opacity: 0.2;
    background: fade(@primary-color, 60%);
  }
  div::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: fade(@primary-color, 30%);
  }

 

标签:样式,0.2,滚动条,track,scrollbar,webkit,div,css
From: https://www.cnblogs.com/bisiyuan/p/17596036.html

相关文章

  • CSS 文字-背景图片纹理、背景视频效果
    1、背景图片纹理效果实现方案:搬运CSS代码:.pattern-overlay{font-size:60px;font-family:'microsoftyahei';background-image:url(./pattern01.jpg);-webkit-text-fill-color:transparent;-webkit-background-clip:text;}.pattern-overlay......
  • Revit二次开发-用GDI+绘制线样式
      最近有个需求就是将动态讲当前文档中的线样式绘制出来,并且显示在自己的UI上。查阅了一下api文档以及吉米大佬的博客,并且这篇博客中受到启发填充样式绘制然后自己琢磨了一下,成功将线样式绘制出来了。但是目前有个问题就是圆点我在dashpattern里面设置的是1f的单位,如果图片......
  • less里面引入样式文件 @import怎么写
    在Less中引入样式文件的@import语句与常规的CSS相似。可以使用以下语法:less@import"path/to/file.less";或者less@importurl("path/to/file.less");其中,"path/to/file.less"是您要引入的样式文件的路径。请确保在使用@import语句时,文件扩展名为.less。请注意,当您在Less中引......
  • APIs修改样式
    1.可以通过style来改,但是太鸡肋样式一多就比较麻烦2.className和classList修改多样式是推荐使用后者优先使用因为其不影响其它类名classList.addclassList.removeclassList.toggle(有此类名就减去没有就加上)......
  • CSS3
    1、什么是CSS如何学习CSS是什么CSS怎么用CSS选择器(重点+难点)美化网页(文字,阴影,超链接,列表,渐变.....)盒子模型浮动定位网页动画(特效)1.1、什么是CSSCascadingStyleSheet层叠级联样式表CSS:表现(美化网页)字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动.........
  • python网站创建007:常见CSS样式
    1.高度和宽度注意1:默认情况下高度和宽度无法应用在行内标签上注意2:默认情况下,块级标签虽然设置了宽度,但是右边空白区域是不允许占用的 高度<divstyle="height:100px"></div>宽度<divstyle="width:200px"></div>块级标签转换为行内标签<divstyle="display:in......
  • CSS常见布局
    两栏布局1.左边固定,右边自适应布局三栏布局流体布局(浮动)BFC三栏布局双飞翼布局圣杯布局flextable布局绝对定位布局网格布局(Grid布局)......
  • VisualStudio2022样式与快捷键与IDEA保持一致
    对于习惯了使用IntelliJIDEA的朋友们来说vs的快捷键和样式可能不太习惯,网上没有找到太多资料,所以我记录一下,一些快速修改VS样式和快捷键的技巧.本人使用的版本为VS2022社区版,也许2017以上都适用可以自行测试样式修改这个很简单安装一个插件就能实现:依次点击VS扩展>......
  • 无涯教程-jQuery - css( properties )方法函数
    css(properties)方法将键/值对象设置为所有匹配元素的样式属性。css(properties)-语法selector.css(properties)上面的语法可以写成如下-selector.css({key1:val1,key2:val2....keyN:valN})这是此方法使用的所有参数的描述-key:value   - 设置为样式属性......
  • Angular: 样式绑定
    解决方案使用ngClass和ngStyle可以进行样式的绑定。ngStyle的使用ngStyle根据组件中的变量,isTextColorRed和fontSize的值来动态设置元素的颜色和字体大小<div[ngStyle]="{'color':isTextColorRed?'red':'blue','font-size':fontSize+'px'}"&g......