SCROLLBAR VISIBILITY WITH JSCROLLPANE

Kadang-kadang bisa sangat berguna untuk menyembunyikan scrollbar dalam sebuah situs web dan hanya terlihat ketika pengguna benar-benar membutuhkannya. The real-time aktivitas pakan di Facebook adalah contoh untuk perilaku seperti itu. Hari ini saya ingin menunjukkan kepada Anda bagaimana menggunakan JScrollPane dan memperpanjang dengan fungsi untuk menyembunyikan scrollbar dan menampilkannya ketika Container onmouse hover / saat mouse diarahkan pada content yang di targetkan menggunakan Scrollbar.

• Demo
 
• Download

JScrollPane diciptakan oleh Kevin Luck dan Anda dapat membaca lebih lanjut di sini:
JScrollPane - cross scrollbar browser yang styleable dengan jQuery dan CSS

THE MARKUP

Contoh untuk markup yang digunakan dalam demo saya adalah sebagai berikut:

<div id="jp-container" class="jp-container">
    <!-- content -->
</div>

Tag pada jp-kontainer tersebut yang akan discroll ke area konten.

CSS

Selain style untuk custom scrollbar JScrollPane, kita akan membuat Container Style:

.jp-container{
    width:500px;
    height:400px;
    position:relative;
    background:#fff;
    border:1px solid #D8DFEA;
    float:left;
}

JAVASCRIPT

Kita akan menggunakan plugin JScrollPane dengan fungsi baru untuk menampilkan dan menyembunyikan scrollbar:

// 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();

Terakhir semoga tutorial ini dapat memberikan Anda inspirasi.