美文网首页
css 实现滚动条美化 支持鼠标移入移出效果

css 实现滚动条美化 支持鼠标移入移出效果

作者: 江火渔枫 | 来源:发表于2020-03-21 23:44 被阅读0次
    .count{
        margin: 15px;
        width: 540px;
        height: 472px;
        position: relative;
        overflow-y: scroll;
          &::-webkit-scrollbar{
            width:5px;
            height:16px;
            background-color:#F5F5F5;
          }
          /*定义滚动条轨道
          内阴影+圆角*/
          &::-webkit-scrollbar-track{
            -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.1);
            border-radius:10px;
            background-color:#F5F5F5;
          }
          /*定义滑块
          内阴影+圆角*/
          &::-webkit-scrollbar-thumb{
            border-radius:10px;
            -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1);
            background-color: rgba(0, 0, 0, 0.02);
          }
        &:hover{
          &::-webkit-scrollbar-track{
            -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
            background-color:#F5F5F5;
          }
          &::-webkit-scrollbar-thumb{
            border-radius:10px;
            -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
            background-color: rgba(0, 0, 0, 0.45);
          }
        }
      }
    

    https://segmentfault.com/a/1190000012800450?utm_source=tag-newest

    相关文章

      网友评论

          本文标题:css 实现滚动条美化 支持鼠标移入移出效果

          本文链接:https://www.haomeiwen.com/subject/aqipyhtx.html