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

overflow滚动条样式修改

时间:2024-02-05 16:46:02浏览次数:31  
标签:手柄 样式 滚动条 color scrollbar webkit overflow border

当div用overflow: scroll;时可以用伪元素::-webkit-scrollbar来设置滚动条样式

        /*滚动条*/
        ::-webkit-scrollbar {
            width: 10px; /* 设置滚动条宽度 */
        }

        /*滚动手柄*/
        ::-webkit-scrollbar-thumb {
            height: 30px;
            background-color: #338BD6; /* 滚动条手柄颜色 */
            border-radius: 5px; /* 滚动条手柄边框圆角 */
            /*outline: 2px solid #dcbc6b;*/
            /*outline-offset: -2px;*/
            /*border: 2px solid #b98d8d;*/
        }
        ::-webkit-scrollbar-thumb:hover {
            background-color: #338BD6; /* 滚动条手柄hover颜色 */
        }
        /*滚动轨道*/
        ::-webkit-scrollbar-track-piece {
            background-color: #1D3887; /* 滚动条轨道颜色 */
            -webkit-border-radius: 3px;
        }

标签:手柄,样式,滚动条,color,scrollbar,webkit,overflow,border
From: https://www.cnblogs.com/aeolian/p/18008390

相关文章

  • CSS3属性之 text-overflow:ellipsis
    语法:text-overflow:clip|ellipsis默认值为clip不显示省略标记clip:当前对象内文本溢出时不显示省略标记,而是将溢出部分裁剪。ellipsis:当对象内文本一处时显示省略标记(...)。 一、常见的单行文本溢出显示省略写法:text-overflow:ellipsis;overflow:hidden;white-sp......
  • 4.WPF样式使用规范
    在Web开发的时候,编写css样式的时候通常是统一写在.css样式文件中。在WPF中也可以使用这样的思想。样式引用:1.新建一个项目用于统一存放样式WPF.UI添加一个资源字典Button.xaml或者CheckBox.xaml等等....<ResourceDictionaryxmlns="http://schemas.microsoft.com/winfx/2006/......
  • flex布局 自适应宽高 缩放到内容高度时不再进行缩放, 需求设置最小高度超出滚动条,并隐
    在需要滚动的元素内部添加一层div,并添加样式:position:absolute;父级样式添加 position:relative;即可<divclassName="pcCommon_left_top">          <divstyle={{position:'absolute',width:'calc(100%-72rem)'}}>     ......
  • 零基础入门Vue之皇帝的新衣——样式绑定
    回顾大致掌握了上一节的插值语法我已经可以把想要的数据显示到页面上,并且仅需要修改变量,页面就会跟着实时改变但如果对于已经熟悉前端的人来说,单单有数据还是不太行,还需要css对数据进行样式的修饰,让页面更加好看所本篇将记录记录Class与Style绑定的学习总所周知,想要给D......
  • OpenHarmony 定义扩展组件样式:@Extend 装饰器
    说明:从APIversion9开始,该装饰器支持在ArkTS卡片中使用。装饰器使用说明语法@Extend(UIComponentName)functionfunctionName{...}使用规则●和@Styles不同,@Extend仅支持定义在全局,不支持在组件内部定义。●和@Styles不同,@Extend支持封装指定的组件的私有属性......
  • 添加代码运行登录注册页,并为其添加一些样式,和调用资源文件
    使用PyQt5(PySide2)+SQLAlchemy做一个登录注册页(二)本文将介绍自己用PyQt5+SQLAlchemy做的一个登录注册页,使用邮箱接收验证码,本文介绍是前后端未分离的实现方式,后续将出一个前后端分离的,你可以将PyQt5改为PySide2以获得更宽松的开源协议本文由于涉及到的代码较多,将会是一......
  • 垂直滚动条挤占子元素宽度的解决方法
    html如下所示:假设子元素的高度超过的父元素的自定义高度,那么父元素会出现垂直滚动条,但是这里的垂直滚动条会占用子元素的原本的宽度空间,导致子元素内部的元素排列混乱,解决这个问题的方法:.father{ overflow-y:overlay;}这样就可以了,简单吧,正因为简单,所以要记录下来,防止以后......
  • el-color-picker 样式修改:去掉确定按钮,失去焦点生效
    分析el-color-picker样式如下:操作:隐藏确定按钮;点击组件外区域时,实现确定功能。解决隐藏确定按钮添加自定义类名popper-class="my-color-picker",然后添加如下全局样式:<stylelang="scss">//隐藏确定按钮.my-color-picker.el-color-dropdown__btns.el-color-dropd......
  • Vite配置第三方组件全局样式遇坑
    项目使用了Vant组件库,想去改变全局的Toast样式有一个样式文件index.less,里面进行了Vant相关样式调整。希望通过构建,将其引入到自己的组件中开始通过preprocessorOptions进行引入,发现对Vant组件修改的样式不起效果,但是普通标签被修改样式后是有效果的preprocessorOptions:{......
  • Visual Stdio 调试出现0xC00000FD:Stack overflow原因及解决方法
    原因:由于系统分配给一个进程的栈空间是一定的,当一个.cpp文件中的栈空间大于系统为该进程所分配的栈空间时,就会报栈溢出错误。解决方法:方法一:动态分配内存不要静态分配内存,用new或malloc来动态创建,从堆中分配内存,因为堆的空间足够大。但是要记得使用free或delete手动释......