Vue自定义滚动条niceScroll

参考网址：
https://nicescroll.areaaperta.com/
https://github.com/inuyaksa/jquery.nicescroll/blob/master/README.md

安装jquery依赖 npm install jquery
在webpack.config.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'

3.在mounted中写调用niceScroll()方法

$(".box").niceScroll();

相关的参数配置：

$(".box").niceScroll（{cursorcolor:"＃424242",//十六进制改变光标颜色cursoropacitymin: 0,//变化不透明度时光标处于非活动状态（scrollabar “隐藏”状态），范围从1到0cursoropacitymax: 1,//当光标是变化的不透明度有效（滚动条处于“可见”状态），范围从1到0cursorwidth: " 5px",//光标宽度（以像素为单位，也可以写为“ 5px”）cursorborder:" 1px solid #fff",//游标边框的css定义cursorborderradius: "5px",//游标zindex的边框半径（以像素为单位）: "auto" | [number],//更改滚动条的z索引divscrollspeed: 60,//滚动速度mousescrollstep : 40,//用鼠标滚轮（像素）滚动的速度touchbehavior: false,//已弃用！使用“ emulatetouch”emulatetouch: 假的,//使光标拖动滚动像台式电脑触摸设备hwacceleration: 真,//当支持使用硬件加速滚动boxzoom: 假的,//启用缩放框中的内容dblclickzoom: 真,//（仅当boxzoom =真）双击框上的手势激活缩放zoom: true,//（仅当boxzoom = true且使用触摸设备时）放大/缩小框上的抓手时启用缩放: true, //（仅当touchbehavior = true时）显示“ grab”图标autohidemode: true,//滚动条的隐藏方式，可能的值：true  |  //隐藏当没有滚动"光标"  |  //只有光标隐藏了false  |  //不要隐藏，"离开"  |  //隐藏只有当指针离开内容"隐藏" |  //始终隐藏"滚动"://仅在滚动 背景上显示 :"",//铁路背景变化的CSSiframeautoresize: 真,//上加载事件AUTORESIZE的iframecursorminheight: 32,//设置最小光标高度（象素）preservenativescrolling:真,//可以滚动与小鼠天然可滚动区域，冒泡鼠标滚轮事件railoffset: false,//您可以为轨道位置bouncescroll 添加top / left偏移量: false,//（仅适用于hw accell）以类似于移动设备的空格键在内容结尾处启用滚动弹跳: true,//当空格键按下railpadding 时启用向下翻页: {顶部： 0,右侧： 0,左侧： 0,底部： 0 },//为rail bardisableoutline 设置填充: true,//对于chrome浏览器，在选择带有nicescrollhorizrailenabled 的div时禁用轮廓（橙色突出显示）: true,//nicescroll可以管理水平滚动railrailalign:右,//垂直轨道的对齐railvalign: bottom,//水平轨道的对齐enabletranslate3d: true,// nicescroll可以使用css转换来滚动内容enablemousewheel: true,// nicescroll可以管理鼠标滚轮eventsenablekeyboard: true,// nicescroll可以管理键盘事件smoothscroll: true,//轻松滚动移动感性rail:true,//单击rail进行滚动enablemouselockapi: true,//可以使用鼠标标题锁定API（与对象拖动相同的问题）cursorfixedheight: false,//以像素为单位设置光标的固定高度hidecursordelay :400,//设置以微秒为单位的延迟以使滚动条淡出directionlockdeadzone: 6,//方向锁定激活的死区（以像素为单位）nativeparentscrolling: true,//检测内容的底部并使父级滚动，因为本机滚动会启用scrollonselection :true,//当选择文本时启用内容的自动滚动cursordragspeed: 0.3,//用光标rtlmode 拖动时的选择速度: "自动",//水平div滚动从左侧的光标开始dragontouch : false,//以触摸/触摸行为模式拖动光标以及oneaxismousemode: "auto",// //允许使用鼠标滚轮在仅水平内容上进行水平滚动，如果false（仅垂直）鼠标滚轮不进行水平滚动，如果value为auto，则检测到两轴鼠标脚本路径：""  //为boxmode定义自定义路径图标（ “”=>相同的脚本路径）preventmultitouchscrolling: 真 //防止滚动的多点触控事件disablemutationobserver:假 //力MutationObserver禁用，enableobserver:真 //启用DOM更改观察者，它会在父级或内容div更改scrollbarid 时尝试调整大小/隐藏/显示: false  //为nicescroll bar设置自定义ID
}）;

应用示例：

设置某DIV样式并更改光标颜色：
$( function(){  $("#thisdiv").niceScroll({cursorcolor:"red"});
}）;

Vue自定义滚动条niceScroll相关推荐

Vue自定义滚动条盒子
应用开发过程中当web页面的内容过多时则会出现滚动条,而原生的滚动条的样式除了谷歌浏览器外其他的浏览器都不好修改,于是打算自己写一个容器组件,当内容过多时隐藏默认的滚动条显示自定义滚动条(只做了垂直滚 ...
Vue项目自定义滚动条样式【火狐、谷歌、360】
Vue项目中自定义浏览器的滚动条样式,已解决火狐.谷歌.360 火狐浏览器谷歌和360 火狐浏览器 // 火狐浏览器专属 // 仅有scrollbar-color.scrollbar-width两个 ...
在vue页面中使用伪元素进行气泡框创建|选中效果自定义|滚动条自定义
在vue页面中使用伪元素进行气泡框|单选框自定义|滚动条自定义 1. 基于vue,使用到的图标是element plus 2. vue单页面代码 <template><h1> ...
vuejs滚动条_Vue.js 桌面端虚拟滚动条|vue美化滚动条VScroll
介绍 VScroll 一款基于vue2.x构建的桌面PC端自定义模拟滚动条组件.支持自定义是否原生滚动条.自动隐藏.滚动条大小.层级及颜色等功能.拥有丝滑般的原生滚动条体验! 除了垂直滚动条,同样的也 ...
Vue自定义指令实现弹窗拖拽，四边拉伸及对角线拉伸
Vue自定义指令实现弹窗拖拽,四边拉伸及对角线拉伸引言页面布局 drag.js文件弹窗拖拽实现及边界限制鼠标指针悬停样式四边拉伸及对角线拉伸拉伸干涉引言近期公司vue前端项目需求:实现 ...
图片懒加载及Vue自定义图片懒加载指令
文章目录监听滚动的方式 IntersectionObserver方式自定义图片懒加载vue指令1 自定义图片懒加载vue指令2 lazyLoadImage.js main.js中注册指令组件中使 ...
使用finereport自定义滚动条
使用finereport自定义滚动条 /* jquery.nicescroll v3.7.6 InuYaksa - MIT - https://nicescroll.areaaperta.com */ ...
vuejs滚动条_Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
前言前段时间有给大家分享一个vue桌面端弹框组件,今天再分享最近开发的一个vue pc端自定义滚动条组件. vscroll 一款基于vue2.x开发的网页端轻量级超小巧自定义美化滚动条组件.支持是否 ...
LabVIEW设计自定义滚动条
在讲解自定义滚动条之前,我们先了解一下,如何动态控制常规的滚动条控件,效果如下所示: 这是使用LabVIEW自带的滑动控件,鼠标右键,选择:"数值",可以看到各式各样的滑动杆控件, ...

Vue自定义滚动条niceScroll

Vue自定义滚动条niceScroll相关推荐

最新文章

热门文章