使用vue-happy-scroll 自定义滚动条

这里演示一下使用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 自定义滚动条相关推荐

vuejs滚动条_Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
前言前段时间有给大家分享一个vue桌面端弹框组件,今天再分享最近开发的一个vue pc端自定义滚动条组件. vscroll 一款基于vue2.x开发的网页端轻量级超小巧自定义美化滚动条组件.支持是否 ...
在vue页面中使用伪元素进行气泡框创建|选中效果自定义|滚动条自定义
在vue页面中使用伪元素进行气泡框|单选框自定义|滚动条自定义 1. 基于vue,使用到的图标是element plus 2. vue单页面代码 <template><h1> ...
Vue项目自定义滚动条样式【火狐、谷歌、360】
Vue项目中自定义浏览器的滚动条样式,已解决火狐.谷歌.360 火狐浏览器谷歌和360 火狐浏览器 // 火狐浏览器专属 // 仅有scrollbar-color.scrollbar-width两个 ...
Vue自定义滚动条盒子
应用开发过程中当web页面的内容过多时则会出现滚动条,而原生的滚动条的样式除了谷歌浏览器外其他的浏览器都不好修改,于是打算自己写一个容器组件,当内容过多时隐藏默认的滚动条显示自定义滚动条(只做了垂直滚 ...
Qt官方示例：UI Components: Scroll Bar Example（自定义滚动条）
此示例演示了一个自定义滚动条的方法. 自定义滚动条: import QtQuick 2.0Item {id: scrollBarproperty real position//范围是 0.0 - 1. ...
CSS3自定义滚动条
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
用css自定义滚动条样式
如果你是一个搞网页前端的,有必要了解一下自定义滚动条样式这个东东.目前支持自定义滚动条样式的有IE浏览器.webkit内核浏览器(chrome). IE下的滚动条样式 1.样式规则 scrollbar ...
android 滚动条自定义样式,IScroll的使用-方向键绑定自定义滚动条样式
之前在webkit上开发一个滚动控件,需要完成的是一段文字,上下键可以滚动,且自定义滚动条.第一想法就是浏览器原生overflow:scroll,且webkit支持自定义滚动条样式: webkit自定 ...
自定义滚动条,可解决火狐滚动条默认样式修改不了问题
优化: 优化了移动设备上,页面滑动距离和滚动条滚动距离比例不正确问题背景: 在项目开发中,由于项目住效果图背景色属于深色系,但是火狐浏览器的默认滚动条样式是一个白色的宽条,两者结合样子太丑,所以尝试 ...
自定义滚动条使用（scrollbar样式设置）
转自:https://segmentfault.com/a/1190000012800450 PS:非商业用途,如有侵权,请联系删除. 一前言在CSS 中,如果我们在块级容器上设置了属性: ove ...

使用vue-happy-scroll 自定义滚动条

兼容性：

支持特性：

安装

使用

使用vue-happy-scroll 自定义滚动条相关推荐

最新文章

热门文章