Jquery自定义滚动条插件
下载地址:https://files.cnblogs.com/files/LoveOrHate/jquery.nicescroll.min.js
1 | <script src= "jquery.nicescroll.js" ></script> |
1 2 3 4 5 | $(document).ready( function () { $( "html" ).niceScroll(); } ); |
1 2 3 4 5 6 | var nice = false ; $(document).ready( function () { nice = $( "html" ).niceScroll(); } ); |
1 2 3 4 5 | $(document).ready( function () { $( "#thisdiv" ).niceScroll({cursorcolor: "#00F" }); } ); |
1 2 3 4 5 | $(document).ready( function () { $( "#viewportdiv" ).niceScroll( "#wrapperdiv" ,{cursorcolor: "#00F" }); } ); |
1 | var nice = $( "#mydiv" ).getNiceScroll(); |
1 | $( "#mydiv" ).getNiceScroll().hide(); |
1 | $( "#mydiv" ).getNiceScroll().resize(); |
入门篇的一些插件
Configuration parameters
When you call "niceScroll" you can pass some parameters to custom visual aspects:
- cursorcolor - change cursor color in hex, default is "#000000"
- cursoropacitymin - change opacity very cursor is inactive (scrollabar "hidden" state), range from 1 to 0, default is 0 (hidden)
- cursoropacitymax - change opacity very cursor is active (scrollabar "visible" state), range from 1 to 0, default is 1 (full opacity)
- cursorwidth - cursor width in pixel, default is 5 (you can write "5px" too)
- cursorborder - css definition for cursor border, default is "1px solid #fff"
- cursorborderradius - border radius in pixel for cursor, default is "4px"
- zindex - change z-index for scrollbar div, default value is 9999
- scrollspeed - scrolling speed, default value is 60
- mousescrollstep - scrolling speed with mouse wheel, default value is 40 (pixel)
- touchbehavior - enable cursor-drag scrolling like touch devices in desktop computer (default:false)
- hwacceleration - use hardware accelerated scroll when supported (default:true)
- boxzoom - enable zoom for box content (default:false)
- dblclickzoom - (only when boxzoom=true) zoom activated when double click on box (default:true)
- gesturezoom - (only when boxzoom=true and with touch devices) zoom activated when pitch out/in on box (default:true)
- grabcursorenabled, display "grab" icon for div with touchbehavior = true, (default:true)
- autohidemode, how hide the scrollbar works, true=default / "cursor" = only cursor hidden / false = do not hide
- background, change css for rail background, default is ""
- iframeautoresize, autoresize iframe on load event (default:true)
- cursorminheight, set the minimum cursor height in pixel (default:20)
- preservenativescrolling, you can scroll native scrollable areas with mouse, bubbling mouse wheel event (default:true)
- railoffset, you can add offset top/left for rail position (default:false)
- bouncescroll, enable scroll bouncing at the end of content as mobile-like (only hw accell) (default:false)
- spacebarenabled, enable page down scrolling when space bar has pressed (default:true)
- railpadding, set padding for rail bar (default:{top:0,right:0,left:0,bottom:0})
- disableoutline, for chrome browser, disable outline (orange hightlight) when selecting a div with nicescroll (default:true)
- horizrailenabled, nicescroll can manage horizontal scroll (default:true)
- railalign, alignment of vertical rail (defaul:"right")
- railvalign, alignment of horizontal rail (defaul:"bottom")
- enabletranslate3d, nicescroll can use css translate to scroll content (default:true)
- enablemousewheel, nicescroll can manage mouse wheel events (default:true)
- enablekeyboard, nicescroll can manage keyboard events (default:true)
- smoothscroll, scroll with ease movement (default:true)
- sensitiverail, click on rail make a scroll (default:true)
- enablemouselockapi, can use mouse caption lock API (same issue on object dragging) (default:true)
- cursorfixedheight, set fixed height for cursor in pixel (default:false)
- hidecursordelay, set the delay in microseconds to fading out scrollbars (default:400)
- directionlockdeadzone, dead zone in pixels for direction lock activation (default:6)
- nativeparentscrolling , detect bottom of content and let parent to scroll, as native scroll does (default:true)
- enablescrollonselection, enable auto-scrolling of content when selection text (default:true)
额,写上这一段的时候主要还是不明白,好多点反对是对我的随笔不满还是对我随笔质量的不满。。实际上我更多的把这个博客当成个人动态玩的。。。所以还是比较随意的。。。当然如果觉得写得有问题可以在下方评论写出改进建议。。。我会虚心接受,顺便可以知道自己的不足点。。。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架