vue的滚动条插件实现代码

这篇文章主要介绍了vue的滚动条插件实现代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

效果如下

代码如下

 

 

.vue-scroll{
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  .vue-scroll-w{
    width: 1000%;
    height: 100%;
    overflow: auto;
    .vue-scroll-c{
      position: relative;
      width: 10%;
    }
  }
  .vue-scrollbar{
    position: absolute;
    z-index: 1;
    right: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: #EEEEEE;
    opacity: 0.6;
    .vue-scrollbar-thumb{
      position: absolute;
      top: 0;
      right: 0;
      width: 4px;
      border-radius: 4px;
      background: #D3D3D3;
      &:hover{
 background: #bbb;
      }
      &:active{
 background: #aaa;
      }
    }
  }
}

使用

 


.scroll{
  width: 400px;
  height: 600px;
  margin: 0 auto;
  border: 1px solid red;
  ul{
    li{
      line-height: 30px;
      border-bottom: 1px solid #ddd;
    }
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。