Vue中使用 nicescroll 美化滚动条 小案例

最终效果：

准备：

项目中安装jQuery：

npm install jquery

在build文件夹下的webpack.dev.conf.js文件中添加如下代码：

plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      jquery: "jquery",
      "window.jQuery": "jquery"
    }),
]

安装jquery.nicescroll依赖

npm install jquery.nicescroll

在main.js中引入jquery与nicescroll

import 'jquery'
import 'jquery.nicescroll'

Nicescroll.vue 全部内容：

<template>
    <div>
      <h1>nicescroll 是jQuery插件 因此需要依赖jQuery</h1>
      <div class="nice-scroll" id="nice-scroll">
        <div class="box">
          国际在线消息：1月30日下午，由斯塔夫罗斯 尼亚尔霍斯基金会主办的以迎接中国新年为主题的“对话”活动在雅典斯塔夫罗斯·尼亚尔霍斯文化中心剧院内举办。中国驻希腊大使章启月、希腊驻华大使罗卡纳斯、雅典商务孔子学院中方院长祖利军教授、希腊著名历史学教授哈尼提斯、西门菲沙大学尼亚尔霍斯、希腊研究中心代理主任克拉里斯教授和希腊文化学者罗彤作为特邀嘉宾参加了活动。
          国际在线消息：1月30日下午，由斯塔夫罗斯 尼亚尔霍斯基金会主办的以迎接中国新年为主题的“对话”活动在雅典斯塔夫罗斯·尼亚尔霍斯文化中心剧院内举办。中国驻希腊大使章启月、希腊驻华大使罗卡纳斯、雅典商务孔子学院中方院长祖利军教授、希腊著名历史学教授哈尼提斯、西门菲沙大学尼亚尔霍斯、希腊研究中心代理主任克拉里斯教授和希腊文化学者罗彤作为特邀嘉宾参加了活动。
          国际在线消息：1月30日下午，由斯塔夫罗斯 尼亚尔霍斯基金会主办的以迎接中国新年为主题的“对话”活动在雅典斯塔夫罗斯·尼亚尔霍斯文化中心剧院内举办。中国驻希腊大使章启月、希腊驻华大使罗卡纳斯、雅典商务孔子学院中方院长祖利军教授、希腊著名历史学教授哈尼提斯、西门菲沙大学尼亚尔霍斯、希腊研究中心代理主任克拉里斯教授和希腊文化学者罗彤作为特邀嘉宾参加了活动。
        </div>
      </div>
    </div>
</template>

<script>
  import $ from 'jquery'
  import 'jquery.nicescroll'
    export default {
        name: "Nicescroll",
      mounted(){
        $("#nice-scroll").niceScroll({
            cursorcolor: "#424242", // 改变滚动条颜色，使用16进制颜色值
            cursoropacitymin: 0, // 当滚动条是隐藏状态时改变透明度, 值范围 1 到 0
            cursoropacitymax: 1, // 当滚动条是显示状态时改变透明度, 值范围 1 到 0
            cursorwidth: "7px", // 滚动条的宽度，单位：便素
            cursorborder: "1px solid red", // CSS方式定义滚动条边框
            cursorborderradius: "5px", // 滚动条圆角（像素）
            scrollspeed: 60, // 滚动速度
            mousescrollstep: 40, // 鼠标滚轮的滚动速度 (像素)
            touchbehavior: false, // 激活拖拽滚动
            hwacceleration: true, // 激活硬件加速
            boxzoom: false, // 激活放大box的内容
            dblclickzoom: true, // (仅当 boxzoom=true时有效)双击box时放大
            gesturezoom: true, // (仅 boxzoom=true 和触屏设备时有效) 激活变焦当out/in（两个手指外张或收缩）
            grabcursorenabled: true, // (仅当 touchbehavior=true) 显示“抓住”图标display "grab" icon
            autohidemode: true, // 隐藏滚动条的方式, 可用的值:
        });
      }
    }
</script>

<style scoped>
  .nice-scroll{
    width: 250px;
    height: 300px;
    overflow-y: scroll;
    margin: 0 auto;
    margin-top: 50px;
  }
  .box{
    margin: 0 auto;
  }
</style>