今天在完善“zblogphp视频站主题”這个模板的时候,需要美化滚动条。
一开始用css来美化,但是兼容性不太好,各个浏览器的写法都不一样,麻烦的很。后来网上搜索搜索找到這个JQ插件,使用后觉得效果还不错,借花献佛分享下。
插件介绍:
Nicescroll滚动条插件是一个非常强大的基于JQUERY的滚动条插件,不需要增加额外的css,几乎全浏览器兼容。ie6+,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件,可在触摸屏上使用。
官网地址:http://www.areaaperta.com/nicescroll/。
使用方法:
必须引用1.5以上版本的JQ库。
然后最简单的使用方法如下:
<script> $(document).ready(function() { $("#scroll_bd").niceScroll("#scroll_ul",boxzoom:true}); }); </script>
html文件:
<div id="scroll_bd"> <div id="scroll_ul"> <p>这是内容部分</p> </div> </div>
css部分,#scroll_bd设置下高度,设置溢出隐藏即可。
插件详细参数:
cursorcolor: "#424242", // 改变滚动条颜色,使用16进制颜色值 cursoropacitymin: 0, // 当滚动条是隐藏状态时改变透明度, 值范围 1 到 0 cursoropacitymax: 1, // 当滚动条是显示状态时改变透明度, 值范围 1 到 0 cursorwidth: "5px", // 滚动条的宽度,单位:便素 cursorborder: "1px solid #fff", // CSS方式定义滚动条边框 cursorborderradius: "5px", // 滚动条圆角(像素) zindex: "auto" | <number>, // 改变滚动条的DIV的z-index值 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" iconautohidemode: true, // 隐藏滚动条的方式, 可用的值: true | // 无滚动时隐藏"cursor" | // 隐藏false | // 不隐藏,"leave" | // 仅在指针离开内容时隐藏"hidden" | // 一直隐藏"scroll", // 仅在滚动时显示 background: "", // 轨道的背景颜色 iframeautoresize: true, // 在加载事件时自动重置iframe大小 cursorminheight: 32, // 设置滚动条的最小高度 (像素) preservenativescrolling: true, // 你可以用鼠标滚动可滚动区域的滚动条和增加鼠标滚轮事件 railoffset: false, // 可以使用top/left来修正位置 bouncescroll: false, // (only hw accell) 启用滚动跳跃的内容移动 spacebarenabled: true, // 当按下空格时使页面向下滚动 railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // 设置轨道的内间距 disableoutline: true, // 当选中一个使用 nicescroll的div时,chrome浏览器中禁用 outlinehorizrailenabled: true, // nicescroll可以管理水平滚动 railalign: right, // 对齐垂直轨道 railvalign: bottom, // 对齐水平轨道 enabletranslate3d: true, // nicescroll 可以使用CSS变型来滚动内容 enablemousewheel: true, // nicescroll可以管理鼠标滚轮事件 enablekeyboard: true, // nicescroll可以管理键盘事件 smoothscroll: true, // ease动画滚动 sensitiverail: true, // 单击轨道产生滚动 enablemouselockapi: true, // 可以用鼠标锁定API标题 (类似对象拖动) cursorfixedheight: false, // 修正光标的高度(像素) hidecursordelay: 400, // 设置滚动条淡出的延迟时间(毫秒) directionlockdeadzone: 6, // 设定死区,为激活方向锁定(像素) nativeparentscrolling: true, // 检测内容底部便于让父级滚动 enablescrollonselection: true, // 当选择文本时激活内容自动滚动 cursordragspeed: 0.3, // 设置拖拽的速度rtlmode: "auto", // DIV的水平滚动从左边开始 cursordragontouch: false, // 使用触屏模式来实现拖拽 oneaxismousemode: "auto", // 当只有水平滚动时可以用鼠标滚轮来滚动,如果设为false则不支持水平滚动,如果设为auto支持双轴滚动 scriptpath: "" // 为boxmode图片自定义路径 ("" => same script path) preventmultitouchscrolling: true // 防止多触点事件引发滚动
相关推荐
- zblogphp1.7版本完整安装包、在线安装包下载08-28
- 诈尸?dedecms发新版了!DedeCMSV6正式发布 dedecms最新版下载11-03
- 2020年 zblog1.6版本终于上线了03-26
- 唐朝“百搭会员中心”插件开源了 zblog会员插件下载地址03-03
- wordpress程序下载 wordpress程序网盘下载10-27
- 阿里巴巴全新免费可商用字体 阿里巴巴普惠体 附官方下载地址04-28
- 终于...zblog导航栏管理插件出来了!11-02
- emlog6.0正式版正式上线!emlog6.0正式版下载10-03
- emlog5.3.1正式版下载地址 emlog免费打包百度网盘下载08-16
- 比较推荐的js插件:swiper[swiper介绍、swiper下载]09-19
欢迎 你 发表评论: 取消回复
- 最新文章
- 热文排行
- 最多评论
- 1天兴工作室2025年春节放假公告01-25
- 2天兴用户中心插件“微信通知”功能设置教程11-09
- 3阿里云2024双11活动推荐 通过本站链接参与另外赠送本站代金券11-05
- 4天兴工作室官网购物活动:全场8折优惠券 不限次数不限金额04-17
- 5天兴工作室zblog纯博客主题 vue3+小程序双版本03-19
- 6vue3项目引入vant报错的错误原因和解决办法03-12
- 7天兴工作室zblog百科主题 可搭配会员插件实现知识付费盈利03-06
- 8zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 9天兴工作室2023双11活动:五折优惠券大放送11-05
- 标签聚合
- ×1装修网站×1常见问题×1玩博客×1插入视频×2wordpress文章总数×1cms×1内容页×1提交工单×4阿里云双11×1前端之路×1电脑端主题×1pc端×8wordpress模板×26zblog插件×1主题编辑×1txt文件×1调用文章×1七夕×2ssl证书×2ie浏览器
最新评论
-
天兴工作室
并没有任何限制 -
访客
请问 zblog淘客主题 对使用者的要求是必须是企业吧? -
阿浩
大佬们,丢几个除了作者以外的演示站,我想看看大家的布局设置 -
有趣生活
一直想开发zblog的功能,zblog的敷在不知道够够不够 -
访客
发布文章时候,那怎么改默认状态呢比如改成默认审核状态?