首页 > 其他分享 >自定义滚动条

自定义滚动条

时间:2022-11-01 17:33:26浏览次数:48  
标签:opacity 自定义 color 滚动条 background overflow 4px

不借助 <el-scrollbar> 这种标签,实现滚动条的效果

一、使用 <div> 标签,设置 height:700px; overflow:auto;

二、<el-main> 标签,设置:

.el-main{
  height: 600px;
  overflow-x: hidden;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    position: absolute;
    width: 4px;
    right: 2px;
    bottom: 2px;
    z-index: 1;
    border-radius: 4px;
    opacity: 0;
    -webkit-transition: opacity 120ms ease-out;
    transition: opacity 120ms ease-out;
  }
  &::-webkit-scrollbar-thumb {
    position: relative;
    display: block;
    cursor: pointer;
    border-radius: 4px;
    background-color: rgba(144, 147, 153, 0.3);
    transition: 0.3s background-color;
    &:hover{
      background-color: rgba(144, 147, 153, 0.5);
    }
  }
}

隐藏掉 水平滚动条 :wrap-style="overflow-x: hidden;"

标签:opacity,自定义,color,滚动条,background,overflow,4px
From: https://www.cnblogs.com/yizhouiqpl/p/16848521.html

相关文章

  • Springboot 自定义注解
    @Target(ElementType.METHOD)@Retention(RetentionPolicy.RUNTIME)@Documentedpublic@interfaceMyAnnotation{Stringkey();}Annotation型定义为 @in......
  • vue实战-完全掌握Vue自定义指令
    准备:自定义指令介绍除了核心功能默认内置的指令(v-model和v-show等),Vue也允许注册自定义指令。注意,在Vue2.0中,代码复用和抽象的主要形式是组件。然而,有的情况下,你......
  • dialog.showMessageBox 自定义icon图标不显示问题
    icon:path.join(__dirname,'../dist/img/facebook.png')注意:开发环境无效,打包后才生效代码如下:dialog.showMessageBox({ //type:'warning', title:'退出提示',......
  • 如何自定义HTTP 状态响应码(response code)
    一、什么是HTTP状态响应码/都有哪些状态响应码?   来自于Mozilla基金会网站的关于HTTP状态码的文章(​​​https://developer.mozilla.org/zh-TW/docs/HTTP/Response_co......
  • unity3d:xlua 加载自定义Loader
    在xLua加自定义loader是很简单的,只涉及到一个接口:publicdelegatebyte[]CustomLoader(refstringfilepath);publicvoidLuaEnv.AddLoader(CustomLoaderloader)通过A......
  • .net maui blazor创建存储自定义目录文件
    stringdir="/storage/emulated/0/Android/data/com.example.myapp/data";if(!Directory.Exists(dir)){Directory.Create......
  • pgsql 自定义函数
    CREATEORREPLACEFUNCTIONtest1(idINTEGER,id1INTEGER)RETURNSINTEGERLANGUAGEplpgsqlAS$$declarecountinteger;begincount=(selectarray_positio......
  • k8s.HPA.使用自定义指标Pod扩容
    k8s.HPA.使用自定义指标Pod扩容环境env:kubernetesv1.22metrics-server0.6.1prometheusv2.36.1prometheus-adapter.v0.10.0概述弹性伸缩1、资源层弹性,如......
  • 自定义注解+AOP实现参数校验
    这边是在学习了AOP和自定义注解之后,就想着将他们两个整合起来,以自定义注解进行标注,以AOP的反射获取信息,然后对代码进行加强,所以这边就简单的实现了一个进行邮箱参数格式校......
  • 宜搭自定义表单中的表格,添加数据源变量
    在数据源处添加的变量是全局变量,可以作为中间值完成后台和前端的数据传递。具体:通过添加“远程变量”,获得后台数据赋值给全局变量用“:”,键和值的格式,表格组件添加数据源来......