這里演示一下使用vue-happy-scroll 自定義滾動條的方式；

官方地址：https://github.com/tangdaohai/vue-happy-scroll

---

兼容性：

---

支持特性：

---

安裝

npm i -D vue-happy-scroll

---

使用

引入

import { HappyScroll } from 'vue-happy-scroll' // 引入css，推薦將css放入main入口中引入一次即可。 import 'vue-happy-scroll/docs/happy-scroll.css'

組件

<template><div class="page8-content"><div class="lrc-box"><imgsrc="xxxxx.png"altclass="title"/><div style="height:401px;"><happy-scrollcolor="#740411"hide-horizontalsize="6":min-length-v="3"resizerightclass="happy-slow"><div class="content"><p class="red info">演唱：xxx</p><p class="red info">詞：xxx</p><p class="red info">曲：xxx</p><p class="red info">版權：xxx</p><p style="margin-top:12px">人事紛紛</p><p>你總太天真</p><p>往后的余生</p><p>我只要你</p><p>往后余生</p><p>風雪是你</p><p>平淡是你</p><p>清貧也是你</p><p>四季冷暖是你</p><p>目光所至</p><p>也是你</p><p>往后余生</p><p>風雪是你</p><p>平淡是你</p><p>清貧也是你</p><p>榮華是你</p><p>心底溫柔是你</p><p>目光所至</p><p>也是你</p><p>目光所至</p><p>也是你</p></div></happy-scroll></div></div><div class="last-p" @click="showTip"></div></div> </template><script> import { HappyScroll } from 'vue-happy-scroll' // 引入css，推薦將css放入main入口中引入一次即可。 import 'vue-happy-scroll/docs/happy-scroll.css' export default {name: 'Eight',components: {HappyScroll},mounted() {//this.setVoice()},methods: {setVoice() {let video = document.getElementById('video')video.volume = 0.2},showTip() {this.$layer.toast({icon: 'icon-check',content: '這是最后一頁啦，可以往前翻看哦~',time: 2000,})},}, } </script> <style lang="scss"> .happy-scroll-container .happy-scroll-content {display: inline-block;width: 100%; } .happy-scroll-content :nth-of-type(1) {margin-left: -4%; }.happy-scroll-container {overflow-x: hidden; } </style><style lang="scss" scoped> .happy-slow {-webkit-overflow-scrolling: touch; } .page8 {background: url(xxxxx.jpg)no-repeat;background-size: cover;margin-top: -1px; }.video-box {background: url(xxxxx.jpg);width: 647px;height: 363px;margin: 50px auto 0;padding: 7px;box-sizing: border-box;video {display: block;width: 100%;height: 100%;} } .lrc-box {text-align: center;font-size: 22px;color: #fff;line-height: 38px;padding-top: 95px;margin-right: 44px;position: relative;z-index: 1;&:after {content: '';position: absolute;right: 4px;top: 92px;bottom: 0;width: 2px;background: #681416;z-index: -1;}.title {position: absolute;left: 50%;top: 32px;transform: translateX(-50%);}p {margin: 0;line-height: 48px;height: 48px;}strong {font-size: 30px;}.red {color: #ad2116;}.info {line-height: 34px;height: 34px;}.dot-btn {width: 10px;height: 10px;border-radius: 50%;background-color: #ad2116;position: absolute;top: 0;right: -6px;} } .last-p {background: transparent;width: 41px;height: 961px;float: left;position: absolute;top: 0;right: 0px; } </style>

總結

以上是生活随笔為你收集整理的使用vue-happy-scroll 自定义滚动条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。