有时候隐藏滚动条对于用户体验来说是一件非常不错的事情,当需要的时候才显示它。这款插件就是使用了jScrollPane和jQuery来实现这种滚动条显示和隐藏的美化效果。
如果你想了解更多关于jScrollPane的知识,请点击这里:jScrollPane – cross browser styleable scrollbars with jQuery and CSS。
HTML结构
<div id="jp-container" class="jp-container"> <!-- content --> </div>
CSS
.jp-container{ width:500px; height:400px; position:relative; background:#fff; border:1px solid #D8DFEA; float:left; }
JAVASCRIPT
// the element we want to apply the jScrollPane var $el = $('#jp-container').jScrollPane({ verticalGutter : -16 }), // the extension functions and options extensionPlugin = { extPluginOpts : { // speed for the fadeOut animation mouseLeaveFadeSpeed : 500, // scrollbar fades out after // hovertimeout_t milliseconds hovertimeout_t : 1000, // if set to false, the scrollbar will // be shown on mouseenter and hidden on // mouseleave // if set to true, the same will happen, // but the scrollbar will be also hidden // on mouseenter after "hovertimeout_t" ms // also, it will be shown when we start to // scroll and hidden when stopping useTimeout : false, // the extension only applies for devices // with width > deviceWidth deviceWidth : 980 }, hovertimeout : null, // timeout to hide the scrollbar isScrollbarHover: false, // true if the mouse is over the scrollbar elementtimeout : null, // avoids showing the scrollbar when moving // from inside the element to outside, passing // over the scrollbar isScrolling : false, // true if scrolling addHoverFunc : function() { // run only if the window has a width bigger than deviceWidth if( $(window).width() <= this.extPluginOpts.deviceWidth ) return false; var instance = this; // functions to show / hide the scrollbar $.fn.jspmouseenter = $.fn.show; $.fn.jspmouseleave = $.fn.fadeOut; // hide the jScrollPane vertical bar var $vBar = this.getContentPane().siblings('.jspVerticalBar').hide(); /* * mouseenter / mouseleave events on the main element * also scrollstart / scrollstop * @James Padolsey : http://james.padolsey.com/javascript/special-scroll-events-for-jquery/ */ $el.bind('mouseenter.jsp',function() { // show the scrollbar $vBar.stop( true, true ).jspmouseenter(); if( !instance.extPluginOpts.useTimeout ) return false; // hide the scrollbar after hovertimeout_t ms clearTimeout( instance.hovertimeout ); instance.hovertimeout = setTimeout(function() { // if scrolling at the moment don't hide it if( !instance.isScrolling ) $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 ); }, instance.extPluginOpts.hovertimeout_t ); }).bind('mouseleave.jsp',function() { // hide the scrollbar if( !instance.extPluginOpts.useTimeout ) $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 ); else { clearTimeout( instance.elementtimeout ); if( !instance.isScrolling ) $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 ); } }); if( this.extPluginOpts.useTimeout ) { $el.bind('scrollstart.jsp', function() { // when scrolling show the scrollbar clearTimeout( instance.hovertimeout ); instance.isScrolling = true; $vBar.stop( true, true ).jspmouseenter(); }).bind('scrollstop.jsp', function() { // when stop scrolling hide the // scrollbar (if not hovering it at the moment) clearTimeout( instance.hovertimeout ); instance.isScrolling = false; instance.hovertimeout = setTimeout(function() { if( !instance.isScrollbarHover ) $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 ); }, instance.extPluginOpts.hovertimeout_t ); }); // wrap the scrollbar // we need this to be able to add // the mouseenter / mouseleave events // to the scrollbar var $vBarWrapper = $('<div/>').css({ position : 'absolute', left : $vBar.css('left'), top : $vBar.css('top'), right : $vBar.css('right'), bottom : $vBar.css('bottom'), width : $vBar.width(), height : $vBar.height() }).bind('mouseenter.jsp',function() { clearTimeout( instance.hovertimeout ); clearTimeout( instance.elementtimeout ); instance.isScrollbarHover = true; // show the scrollbar after 100 ms. // avoids showing the scrollbar when moving // from inside the element to outside, // passing over the scrollbar instance.elementtimeout = setTimeout(function() { $vBar.stop( true, true ).jspmouseenter(); }, 100 ); }).bind('mouseleave.jsp',function() { // hide the scrollbar after hovertimeout_t clearTimeout( instance.hovertimeout ); instance.isScrollbarHover = false; instance.hovertimeout = setTimeout(function() { // if scrolling at the moment // don't hide it if( !instance.isScrolling ) $vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 ); }, instance.extPluginOpts.hovertimeout_t ); }); $vBar.wrap( $vBarWrapper ); } } }, // the jScrollPane instance jspapi = $el.data('jsp'); // extend the jScollPane by merging $.extend( true, jspapi, extensionPlugin ); jspapi.addHoverFunc();
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!