滚动条美化jQuery插件

PetitQ 其他代码 2018-11-10 1.79K 0 0

有时候隐藏滚动条对于用户体验来说是一件非常不错的事情，当需要的时候才显示它。这款插件就是使用了 jScrollPane 和 jQuery 来实现这种滚动条显示和隐藏的美化效果。
如果你想了解更多关于 jScrollPane 的知识，请点击这里：jScrollPane – cross browser styleable scrollbars with jQuery and CSS。

HTML 结构

<div id="jp-container" class="jp-container">

```
    
```
```
</div>
```

也想出现在这里？联系我们吧

```
.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();
```

滚动条美化 jQuery 插件

已有 447 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

其他代码

滚动条美化jQuery插件

HTML 结构

JAVASCRIPT

滚动条美化 jQuery 插件

相关文章

SVG打造可爱bongo cat打字动画特效

jSignature - 写字板手写签名jQuery插件

纯CSS3进度条动画效果

发表回复取消回复

热销模板

其他代码

HTML 结构

JAVASCRIPT

滚动条美化 jQuery 插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复