Vue的el-scrollbar实现自定义滚动

Vue的el-scrollbar是一个自定义滚动条的插件。它使用了css样式和JavaScript技术来实现滚动条，并且可以为滚动条进行一些样式定制。本攻略将详细介绍如何使用Vue的el-scrollbar实现自定义滚动。

步骤一：安装el-scrollbar插件

在使用Vue的el-scrollbar插件之前，我们需要先安装该插件。可以通过npm命令进行安装，命令如下：

npm install element-ui -S

在安装完成后，我们需要在项目中引入el-scrollbar插件。可以在项目的main.js文件中添加以下代码：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

这样就可以完成el-scrollbar插件的安装和引入。

步骤二：使用el-scrollbar插件

在完成el-scrollbar插件的安装和引入后，我们就可以在项目中使用该插件。首先，在组件的template中添加el-scrollbar元素，如下：

<el-scrollbar style="height: 300px;">
  <!--add your content here-->
</el-scrollbar>

在添加了el-scrollbar元素后，我们就可以在其中添加我们需要滚动的内容。这些内容可以是任何HTML元素，例如div、ul、li等等。需要注意的是，在el-scrollbar中添加内容时，父元素的高度必须小于内容的高度。否则，插件就无法正常工作。

接下来，我们就可以在el-scrollbar元素中使用自定义样式了。通过为该元素添加CSS样式，我们可以轻松地实现滚动条的颜色、宽度等自定义样式。例如，以下是一个自定义滚动条颜色的示例：

<el-scrollbar style="height: 300px;">
  <ul style="height:800px;">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
  </ul>
</el-scrollbar>

<style scoped>
.el-scrollbar__bar.is-vertical{
  background-color: green;
}
.el-scrollbar__thumb.is-vertical{
  background-color: #67C23A;
}
</style>

在这个示例中，我们指定了el-scrollbar元素的高度为300px，而ul元素的高度为800px。因此，ul元素会超出el-scrollbar的高度，从而导致滚动条的出现。我们还在style标签中定义了两个CSS样式，分别是.el-scrollbar__bar.is-vertical和.el-scrollbar__thumb.is-vertical。这两个样式用于定义自定义的滚动条颜色。其中，.el-scrollbar__bar.is-vertical用于定义滚动条的背景色，.el-scrollbar__thumb.is-vertical用于定义滚动条拖动条的背景色。

除了自定义滚动条颜色外，我们还可以对滚动条的宽度、样式、位置等进行自定义。以下是一个自定义滚动条宽度和样式的示例：

<el-scrollbar style="height: 300px;">
  <p style="height: 800px;">add your content here</p>
</el-scrollbar>

<style scoped>
.el-scrollbar__bar{
  width:12px;
  background-color: #F5F5F5;
}
.el-scrollbar__thumb{
  background-color: #C0C4CC;
  border-radius:8px;
}
</style>

在这个示例中，我们添加了一个p元素作为滚动内容，并为滚动条定义了宽度和样式。其中，.el-scrollbar__bar用于定义滚动条的宽度和背景色，.el-scrollbar__thumb则用于定义滚动条拖动条的宽度和颜色。

总结：通过以上两个示例我们可以发现使用el-scrollbar插件是非常便捷和灵活的，只需要在组件的模板中添加el-scrollbar元素，并添加自己需要自定义的样式即可。同时为了滚动正常使用，需要加注意父元素高度必须小于内容高度这个因素。