zoukankan      html  css  js  c++  java
  • 全局改变滚动条样式

    全局改变滚动条样式


    全局样式文件

    base.scss
    /* 设置滚动条的样式 */
    ::-webkit-scrollbar {
        @include setScrollbar($ 6px, $height: 6px);
    }
    ::scrollbar {
        @include setScrollbar($ 6px, $height: 6px);
    }
    /* 滚动槽 */
    ::-webkit-scrollbar-track {
        @include setScrollbarTrack();
    }
    ::scrollbar-track {
        @include setScrollbarTrack();
    }
    
    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
        @include setScrollbarThumb($radius: 10px, $color: #006666, $shadowWidth: 1px);
    }
    ::scrollbar-thumb {
        @include setScrollbarThumb($radius: 10px, $color: #006666, $shadowWidth: 1px);
    }
    

    mixin.scss

    @mixin setScrollbar($null,$height:null) {
      $width;
      height: $height;  
    }
    
    @mixin setScrollbarTrack {
      display: none;
    }
    
    @mixin setScrollbarThumb($radius:null,$color:null,$shadowWidth:null) {
      border-radius: $radius;
      background: $color;
      -webkit-box-shadow:inset 0 0 $shadowWidth $color;
    }
    

    生成样式

    markdown在线编辑器网站——https://www.zybuluo.com

    人生到处知何似,应似飞鸿踏雪泥。
  • 相关阅读:
    printf,sprintf,fprintf的区别与联系
    linux repo init 遇到的问题
    POSTMAN使用说明
    HTTP协议-深入了解
    HTTP协议-详解篇
    HTTP协议-基础篇
    多线程学习
    I/O流
    String类学习&泛型
    集合
  • 原文地址:https://www.cnblogs.com/lepanyou/p/15355562.html
Copyright © 2011-2022 走看看