zoukankan      html  css  js  c++  java
  • 侧边导航栏滚动条---CSS overflow实现

    给侧边导航栏增加滚动条,element的滚动条好像不太好用,所以就使用CSS 的overflow来实现,overflow属性给父元素增加

    HTML

     CSS

    /*滚动条*/
    .scroll {
      height: calc(100vh - 52px);
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: auto;
    }
    
    /* 定义滚动条样式 */
    ::-webkit-scrollbar {
      width: 5px;
      height: 10px;
      background-color: #195fab;
    }
    
    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track {
      box-shadow: inset 0 0 0px #072E97;
      border-radius: 10px;
      background-color: #195fab;
    }
    
    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
      background-color: rgba(240, 240, 240, .5);
    }

    效果呈现,长度超过屏幕,自动显示竖向滚动条

  • 相关阅读:
    Android培训准备资料之Android开发环境的搭建
    第二十天
    第十九天
    第十八天
    第十七天
    第十六天
    第十四天
    第十三天
    十二天
    十一天
  • 原文地址:https://www.cnblogs.com/wiliamzhao/p/15355445.html
Copyright © 2011-2022 走看看