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

css 改变滚动条样式

时间:2022-12-30 17:22:56浏览次数:30  
标签:padding 样式 height 滚动条 1px background webkit css

 

/*滚动条样式start*/
    ::-webkit-scrollbar {
        width: 3px;
        height: 8px;
    }

    ::-webkit-scrollbar-button {
        width: 0;
        height: 0;
    }

    ::-webkit-scrollbar-thumb {
        min-height: 28px;
        padding-top: 100;
        background-color: rgba(0, 0, 0, .1);
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        border-radius: 5px;
        -webkit-box-shadow: inset 1px 1px 0 rgb(0 0 0 / 10%), inset 0 -1px 0 rgb(0 0 0 / 7%);
    }
    /*滚动条样式end*/

 

标签:padding,样式,height,滚动条,1px,background,webkit,css
From: https://www.cnblogs.com/mtjj/p/17015390.html

相关文章

  • html css js复习
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content=......
  • 样式穿透 >>>、/deep/ 、::v-deep 、:deep(<inner-selector>)应用场景
    在vue中,我们为了避免父组件的样式影响到子组件的样式,会在<style>标签上设置scoped属性,这样它的CSS只会应用到当前组件的元素上,即使父组件中有跟子组件相同的class名称......
  • 视频直播app源码,css预加载旋转动画与流光字体
    视频直播app源码,css预加载旋转动画与流光字体一、预加载旋转动画css body{}.concentric_round{width:200rpx;height:200rpx;position:relative;position:absolu......
  • CSS样式
    1、高度和宽度<style>.c1{height:300px;}.c2{width:10px;}</style>宽度支持百分比,高度不支持百分......
  • jquery改变css样式和vue改变样式的区别
    jQuery做的就是操作dom节点,从而去改变css样式;而vue不用操作DOM,只关心数据,是从数据绑定的角度去改变样式的先来看看jQuery,我用的是vue框架,所以先安装jQuerynpminstal......
  • CSS快速入门
    1、CSS基础知识CSS:专门用来美化HTML"标签"CSS应用方式:①直接在标签上应用<imgsrc="..."style="height:100px">②在head标签中写style标签<!DOCTYPEhtml><ht......
  • 2CSS
    HTML的局限性说起HTML,这其实是一个非常单纯的家伙,他只关注内容的语义比如<h1>表明这是一个大标题,用<p>表明这是一个段落,用<img>表明这儿有一个图片,用<a>表示此处有链接。很......
  • 4HTML5+CSS3
    VSCode简介VisualStudioCode(简称VSCode/VSC)是微软公司推出的一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、GIT等特性,支......
  • CSS 平滑滚动 scroll-behavior: smooth
    凡是需要滚动的地方都加一句scroll-behavior:smooth来提升滚动体验!经常使用的锚点定位功能就有了平滑定位功能,如<ahref="#">返回顶部</a>全局css中也建议添加html,body......
  • 【基于HTML+CSS制作中华传统文化传统美德网站 (6页面)】
    ​原始HTML+CSS+JS页面设计,web大学生网页设计作业源码,这是一个不错的网页制作,画面精明,非常适合初学者学习使用。作品介绍>​1.网页作品简介方面 :HTML期末大学生网页设计......