vue+jquery自定义滚动条

最近一直在整理以前学过的前端知识，想着光看不练假把式，所以想到把知识整合起来，写一些插件给自己用用看，因为现在基本都是用vue开发，所以就把这些插件包装成组件发布到npm上，这是滚动条的npm地址 https://www.npmjs.com/package/cjhcj-scroll
，里面有比较详细的使用说明，它能够兼容比较新版本的ie，chrome，Firefox，microedge，360安全浏览器，由于我的机子就只有几个浏览器，所以其他浏览器的兼容就不知道了。有兴趣的同学可以用用看，如果能测出bug的话请务必在下方提出，在这里各种谢谢了，废话不多说，上代码。

ScrollBar.vue
这里面的代码是对滚动条滚动的一些逻辑的书写，以下有一些主要的注释能够帮助你看懂它，这里我就不多说了。

<template><div class="scroll"><div class="scroll-volume"><div class="scroll-content"><slot></slot><!-- 这个是插槽，将本组件导入需要滚动的内容里面，然后用开始标签和结束标签包裹要滚动的内容就可以将滚动的内容注入到插槽中，插槽slot这个标签默认是不渲染的 --></div></div><div class="scroll-rail" >  <!-- 滚动条容器 --><div class="scroll-bar"></div> <!-- 滚动条 --></div></div>
</template>
<script>
import util from "./util";
export default {name: "scorllBar",data() {return {containerHeight: 0, //滚动条容器的高度contentHeight: 0, //滚动内容的高度barHeight: 0, //滚动条的高度maxScroll: 0, //滚动条滚动的最大距离};},props: ["scrollStyle"],watch: {scrollStyle(val, oldVal) {this.setScrollStyle();}},mounted() {this.$(() => {this.barResize(); // 监听滚动内容的高度改变来重新设置滚动条//初始化this.init();// 监听屏幕大小的改变this.$(window).resize(() => {this.init();});});},methods: {// 拖动滚动条进行滚动scrolling() {// 滚动条滚动的思路// 当鼠标在滚动条按下的时候立刻获取鼠标距离滚动条定点的距离offsetY和滚动条// 距离滚动轨道的top值railY// 然后当鼠标拖动滚动时，实时获取鼠标距离页面定点的高度pageY// 有pageY - railY - offsetY 就可以得到滚动条滚动的高度了，然后用css就可以进行设置了this.$(".scroll-bar").mousedown(event => {var offsetY = event.offsetY;let railY = this.$(".scroll-rail").offset().top;this.$(document).mousemove(event => {// console.log(event.offsetY);let pageY = event.pageY || event.clientY;let scrollHei = pageY - railY - offsetY;if (scrollHei <= 0) {scrollHei = 0;} else if (scrollHei >= this.maxScroll) {scrollHei = this.maxScroll;}this.setScroll(scrollHei);});});this.$(document).mouseup(() => {this.$(document).off("mousemove");});},// 点击滚动条轨道触发滚动条滚动clickRail() {this.$(".scroll-bar").click(event => {event.stopPropagation(); //阻止事件冒泡});this.$(".scroll-rail").click(event => {let offsetY = event.offsetY;let barScrollHei = offsetY - this.$(".scroll-bar").height() / 2;this.setScroll(barScrollHei);});},// 设置页面内容的滚动和滚动条的滚动setScroll(scrollHei) {this.$(".scroll-bar").css({top: scrollHei + "px"});// 计算内容滚动的高度let contentScrollHei =(scrollHei * this.contentHeight) / this.containerHeight;this.$(".scroll-volume").scrollTop(contentScrollHei); //让包裹内容的容器滚动},// 监听页面内容鼠标的滚动mouseWheelPlay() {this.$(".scroll-volume").on("scroll", event => {let scrollHei = this.$(".scroll-volume").scrollTop();this.contentScrollWithMouse(scrollHei);});},// 页面内容随鼠标滚动contentScrollWithMouse(scrollHei) {let barScrollHei =(scrollHei * this.containerHeight) / this.contentHeight;if (barScrollHei <= 0) {barScrollHei = 0;} else if (barScrollHei >= this.maxScroll) {barScrollHei = this.maxScroll;}this.$(".scroll-bar").css({top: barScrollHei + "px"});},// 初始化init() {this.containerHeight = this.$(".scroll").height();this.contentHeight = this.$(".scroll-content").height();this.barHeight =(this.containerHeight * this.containerHeight) / this.contentHeight;this.maxScroll = this.containerHeight - this.barHeight;console.log(this.maxScroll, this.barHeight);if (this.maxScroll <= 0) {//若没有可以滚动的地方，那就把滚动条隐藏掉this.toggleScrollRail = false;return;} else {this.toggleScrollRail = true;}// 到下一轮事件循环才开始监听事件setTimeout(() => {this.$(".scroll-bar").css({height: this.barHeight + "px"});// 拖动滚动条的滚动this.scrolling();// 点击滚动条轨道触发滚动条滚动this.clickRail();// 监听鼠标的滚动来带动滚动条的滚动this.mouseWheelPlay();// 设置滚动条的样式this.setScrollStyle();}, 0);},// 监听滚动内容的高度改变来重新设置滚动条barResize() {util.domReize(this.$(".scroll-content")).then(res => {// console.log(res);this.init();});},// 设置滚动条的样式setScrollStyle() {let style = this.scrollStyle;for (let key in style) {this.$(`.scroll-${key}`).css(style[key]);}}},};
</script>
<style scoped>
@import "./ScrollBar.css";
</style>

ScrollBar.css

这里面有些样式的设置是有点意思，看注释下的代码，那些是能够将浏览器默认的滚动条隐藏的。

.scroll {width: 100%;height: 100%;position: relative;}.scroll-volume::-webkit-scrollbar {/* 隐藏浏览器默认的滚动条 */display: none!important;}.scroll-volume {width: 100%;height: 100%;overflow: auto;position: relative;/* 隐藏浏览器默认的滚动条 */-ms-overflow-style: none; /* IE 10+ */overflow: -moz-scrollbars-none; /* Firefox */scrollbar-width: none; /*firefox*/}.scroll-content {position: absolute;top: 0px;left: 0px;width: 100%;transition: all 0.5s;}.scroll-rail {-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;position: absolute;top: 0px;right: 0px;width: 10px;height: 100%;background: gray;border-radius: 20px;}.scroll-bar {width: 100%;border-radius: 20px;background: lightblue;position: absolute;top: 0px;left: 0px;transition: all 0.1s;}

util.js

这个代码就很有意思了，是我最近看文档看到的，这个代码的作用是能够检测指定标签内的样式变化，我这里只是设置检测指定元素内高度的变化，并不检测元素其他样式，文档链接 https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

function domReize(dom) {return new Promise((resolve, rejected) => {let MutationObserver =window.MutationObserver ||window.WebKitMutationObserver ||window.MozMutationObserver;let ele = dom[0];let observer = new MutationObserver(mutationList => {resolve(mutationList);});observer.observe(ele, {attributes: true,attributeFilter: ["height"],attributeOldValue: true,childList: true,subtree: true});})
}
export default {domReize
}

至此，主要的核心代码都放完了。我估摸着我上面的代码大家可能都不太想看，因为太多了，所以，我把代码发到github上了，这是地址 ,https://github.com/2016035743013/vue-scroll 大家去用用看吧。

滚动条效果
特别说明
使用本组件时，切记组件包裹的上级标签设置一定的高度，否则滚动条是不会出现的

有什么问题请在下方提问，我会尽量及时解答，如果写的不好请不要喷，拒绝网络暴力。

vue+jquery自定义滚动条相关推荐

jQuery自定义滚动条样式
jQuery自定义滚动条样式比较好用的jquery插件:http://manos.malihu.gr/jquery-custom-content-scroller/
Vue项目自定义滚动条样式【火狐、谷歌、360】
Vue项目中自定义浏览器的滚动条样式,已解决火狐.谷歌.360 火狐浏览器谷歌和360 火狐浏览器 // 火狐浏览器专属 // 仅有scrollbar-color.scrollbar-width两个 ...
vuejs滚动条_Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
前言前段时间有给大家分享一个vue桌面端弹框组件,今天再分享最近开发的一个vue pc端自定义滚动条组件. vscroll 一款基于vue2.x开发的网页端轻量级超小巧自定义美化滚动条组件.支持是否 ...
oracle form 滚动条,jQuery实现的自定义滚动条实例详解
本文实例讲述了jQuery实现的自定义滚动条.分享给大家供大家参考,具体如下: 可以自由的给滚动条定义背景,上下按钮,当然不仅仅是颜色,连图片当背景也可以.支持鼠标滚轮,点击滚动条滚轴定位,上下按钮久 ...
在vue页面中使用伪元素进行气泡框创建|选中效果自定义|滚动条自定义
在vue页面中使用伪元素进行气泡框|单选框自定义|滚动条自定义 1. 基于vue,使用到的图标是element plus 2. vue单页面代码 <template><h1> ...
JQuery实现自定义滚动条
在页面中虽然可以通过CSS修改滚动条的样式,但是部分属性是无法自己修改和设置的,而且不同浏览器存在兼容问题,因此通过JS来实现滚动条在自定义滚动条的环境下也是有必要的. 接下来,我们来实现上图两种情况 ...
Vue自定义滚动条盒子
应用开发过程中当web页面的内容过多时则会出现滚动条,而原生的滚动条的样式除了谷歌浏览器外其他的浏览器都不好修改,于是打算自己写一个容器组件,当内容过多时隐藏默认的滚动条显示自定义滚动条(只做了垂直滚 ...
Vue的自定义滚动，我用el-scrollbar
弄了一个持续更新的github笔记,可以去看看,诚意之作(本来就是写给自己看的--)链接地址:Front-End-Basics 此篇文章的地址:Vue的自定义滚动,我用el-scrollbar 基础笔 ...
Jquery自定义分页插件
效果: 核心代码: 自定义Jquery插件grid.js //Jquery自定义分页插件 (function($) {$.fn.grid= function(options) {var objGrid ...

vue+jquery自定义滚动条

vue+jquery自定义滚动条相关推荐

最新文章

热门文章