Slick Custom Scrollbar

**fmalone** · 03-07-2012, 04:09 PM

http://www.dynamicdrive.com/dynamicindex11/scrollc.htm

Thanks for this script its exactly what I wanted. How do you make the "rel.drag" object stop at the top and/or bottom of the "rel.bar"? instead of going beyond has it does by default.

Thanks for your help

**vwphillips** · 03-08-2012, 09:37 AM

Code:

    return this.each( function() {
        var direction = d.direction;
        var drag = {
            d: direction,
            t: $( this ).attr( "rel" ),
            id: $( this ),
            setdimensions: function(orientation) { //DD added function
                if (orientation=="horizontal"){
                    drag.b.css( { width: drag.id.width(), left: 0, bottom: 0, position: "absolute", "z-index": 10 } );
                    drag.c.css( { display: "block", position: "absolute", height: drag.id.height() - drag.b.height() - 5, "overflow-y": "hidden" } );
                    drag.s.css( { width: drag.b.width(), top: 0, width: 70, height: drag.b.height(), position: "absolute", "z-index": 100 } );
                	  drag.tickB = parseFloat( parseInt( drag.c.width() - drag.s.parent().width() ) / parseInt( drag.s.parent().width() - drag.s.width() ) );
                    drag.tickC = parseFloat( parseInt( drag.s.parent().width() - drag.s.width() ) / parseInt( drag.c.width() - drag.s.parent().width() ) );
                     return [drag.b.width()-drag.s.width(),drag.id.width()-drag.c.width()];
								}
								else{
                    drag.b.css( { height: drag.id.height(), right: 0, top: 0, position: "absolute" } );
                    drag.c.css( { display: "block", position: "absolute", width: drag.id.width() - drag.b.width() - 5 } );
                    drag.s.css( { width: drag.b.width(), top: 0, height: 70, position: "absolute" } );
                    drag.tickB = parseFloat( parseInt( drag.c.height() - drag.s.parent().height() ) / parseInt( drag.s.parent().height() - drag.s.height() ) );
                    drag.tickC = parseFloat( parseInt( drag.s.parent().height() - drag.s.height() ) / parseInt( drag.c.height() - drag.s.parent().height() ) );
                     return [drag.b.height()-drag.s.height(),drag.id.height()-drag.c.height()];
							}
  					},

Code:

                switch ( drag.d ) {
                    case "horizontal":
                        drag.elements( "horizontal" );
                        var maxs=drag.setdimensions( "horizontal" );
                        drag.s.data( { click: false } );
                        drag.s.mouseover( function() {
                            drag.s.data( { click: true } );
                        });
                        drag.s.mouseout( function() {
                            drag.s.data( { click: false } );
                        });
                        drag.s.mousedown( function( f ) {
                            f.preventDefault();
                            drag.s.data( { hold: false } );
                            var initial = drag.s.parent().offset().left - ( drag.s.offset().left - f.pageX );
                            $( document ).mousemove( function( e ) {
                                e.preventDefault();
                                if ( drag.s.data( "hold" ) == false )
                                {
                                    drag.s.css( { left: Math.min(Math.max(e.pageX - initial,0),maxs[0]) } );
                                    drag.c.css( { left: Math.max(Math.min(- drag.tickB * ( e.pageX - initial ),0),maxs[1]) } );
                                }
                            });
                        });
                        $( document ).mouseup( function() {
                            drag.redrawH();
                        });
                        drag.b.click( function( e ) {
                            if ( drag.s.data( "click" ) == false )
                            {
                                var initial = drag.s.parent().offset().left + ( drag.s.width() / 2 );
                                drag.s.animate( { left: e.pageX - initial } );
                                drag.c.animate( { left: - drag.tickB * ( e.pageX - initial ) }, {
                                    complete: function() {
                                        drag.redrawH();
                                    }
                                });
                            }
                        });
                    break;
                    case "vertical":
                        drag.elements( "vertical" );
                        var maxs=drag.setdimensions( "vertical" );
                        drag.s.data( { click: false } );
                        drag.s.mouseover( function() {
                            drag.s.data( { click: true } );
                        });
                        drag.s.mouseout( function() {
                            drag.s.data( { click: false } );
                        });
                        drag.s.mousedown( function( f ) {
                            f.preventDefault();
                            drag.s.data( { hold: false } );
                            var initial = drag.s.parent().offset().top - ( drag.s.offset().top - f.pageY );
                            $( document ).mousemove( function( e ) {
                                e.preventDefault();
                                if ( drag.s.data( "hold" ) == false )
                                {
                                  drag.s.css( { top: Math.min(Math.max(e.pageY - initial,0),maxs[0]) } );
                                    drag.c.css( { top: Math.max(Math.min(- drag.tickB * ( e.pageY - initial ),0),maxs[1]) } );
                                }
                            });
                        });
                        $( document ).mouseup( function() {
                            drag.redrawV();
                        });
                        drag.b.click( function( e ) {
                            if ( drag.s.data( "click" ) == false )
                            {
                                var initial = drag.s.parent().offset().top + ( drag.s.height() / 2 );
                                drag.s.animate( { top: e.pageY - initial } );
                                drag.c.animate( { top: - drag.tickB * ( e.pageY - initial ) }, {
                                    complete: function() {
                                        drag.redrawV();
                                    }
                                });
                            }
                        });
                    break;
                }

**fmalone** · 03-08-2012, 02:12 PM

You are the best, worked perfect right up. Thank you so so much I really appreciate it

**fmalone** · 03-08-2012, 02:56 PM

http://www.dynamicdrive.com/dynamicindex11/scrollc.htm

How to allow scrolling while not right over the drag? I would like the user to be able to scroll while being anywhere over the scrolling window.

here is my page: http://djilali.com/resume.html

I just want to make sure the user will not miss the scrolling option.

Thanks in advance

**vwphillips** · 03-08-2012, 05:04 PM

Code:

                switch ( drag.d ) {
                    case "horizontal":
                        drag.elements( "horizontal" );
                        var maxs=drag.setdimensions( "horizontal" );
                        drag.s.data( { click: false } );
                        drag.s.mouseover( function() {
                            drag.s.data( { click: true } );
                        });
                        drag.s.mouseout( function() {
                            drag.s.data( { click: false } );
                        });
                        drag.id.mouseover( function( f ) {
                            f.preventDefault();
                            drag.s.data( { hold: false } );
                            var initial = drag.s.parent().offset().left - ( drag.s.offset().left - f.pageX );
                            $( document ).mousemove( function( e ) {
                                e.preventDefault();
                                if ( drag.s.data( "hold" ) == false )
                                {
                                    drag.s.css( { left: Math.min(Math.max(e.pageX - initial,0),maxs[0]) } );
                                    drag.c.css( { left: Math.max(Math.min(- drag.tickB * ( e.pageX - initial ),0),maxs[1]) } );
                                }
                            });
                        });
                        drag.s.mousedown( function( f ) {
                            f.preventDefault();
                            drag.s.data( { hold: false } );
                            var initial = drag.s.parent().offset().left - ( drag.s.offset().left - f.pageX );
                            $( document ).mousemove( function( e ) {
                                e.preventDefault();
                                if ( drag.s.data( "hold" ) == false )
                                {
                                    drag.s.css( { left: Math.min(Math.max(e.pageX - initial,0),maxs[0]) } );
                                    drag.c.css( { left: Math.max(Math.min(- drag.tickB * ( e.pageX - initial ),0),maxs[1]) } );
                                }
                            });
                        });
                        $( document ).mouseup( function() {
                            drag.redrawH();
                        });
                        drag.b.click( function( e ) {
                            if ( drag.s.data( "click" ) == false )
                            {
                                var initial = drag.s.parent().offset().left + ( drag.s.width() / 2 );
                                drag.s.animate( { left: e.pageX - initial } );
                                drag.c.animate( { left: - drag.tickB * ( e.pageX - initial ) }, {
                                    complete: function() {
                                        drag.redrawH();
                                    }
                                });
                            }
                        });
                    break;
                    case "vertical":
                        drag.elements( "vertical" );
                        var maxs=drag.setdimensions( "vertical" );
                        drag.s.data( { click: false } );
                        drag.s.mouseover( function() {
                            drag.s.data( { click: true } );
                        });
                        drag.s.mouseout( function() {
                            drag.s.data( { click: false } );
                        });
                        drag.id.mouseover( function( f ) {
                            f.preventDefault();
                            drag.s.data( { hold: false } );
                            var initial = drag.s.parent().offset().top - ( drag.s.offset().top - f.pageY );
                            $( document ).mousemove( function( e ) {
                                e.preventDefault();
                                if ( drag.s.data( "hold" ) == false )
                                {
                                  drag.s.css( { top: Math.min(Math.max(e.pageY - initial,0),maxs[0]) } );
                                    drag.c.css( { top: Math.max(Math.min(- drag.tickB * ( e.pageY - initial ),0),maxs[1]) } );
                                }
                            });
                        });
                        drag.s.mousedown( function( f ) {
                            f.preventDefault();
                            drag.s.data( { hold: false } );
                            var initial = drag.s.parent().offset().top - ( drag.s.offset().top - f.pageY );
                            $( document ).mousemove( function( e ) {
                                e.preventDefault();
                                if ( drag.s.data( "hold" ) == false )
                                {
                                  drag.s.css( { top: Math.min(Math.max(e.pageY - initial,0),maxs[0]) } );
                                    drag.c.css( { top: Math.max(Math.min(- drag.tickB * ( e.pageY - initial ),0),maxs[1]) } );
                                }
                            });
                        });
                        $( document ).mouseup( function() {
                            drag.redrawV();
                        });
                        drag.b.click( function( e ) {
                            if ( drag.s.data( "click" ) == false )
                            {
                                var initial = drag.s.parent().offset().top + ( drag.s.height() / 2 );
                                drag.s.animate( { top: e.pageY - initial } );
                                drag.c.animate( { top: - drag.tickB * ( e.pageY - initial ) }, {
                                    complete: function() {
                                        drag.redrawV();
                                    }
                                });
                            }
                        });
                    break;
                }

**jscheuer1** · 03-08-2012, 05:34 PM

I'm not sure if that would be acceptable. If it's not, there's a jQuery mousewheel plugin:

http://brandonaaron.net/code/mousewheel/docs

That could possibly be adapted to allow scrolling the mousewheel while over the drag.id to move both the content and the scrollbar.

I think it allows you to easily get the wheel delta (how much the wheel has been turned and in which direction) cross browser as an event for a given element.

Not sure if the amount of delta is reliable cross browser. I know the direction is.

Works well in some other scripts that I've seen use it. But they might have only needed to know direction.

I'm pressed for time right now or I'd try my hand at it myself, maybe later.

Vic, great job on the first part (limiting the scrollbar range)! That had been bugging me about this script from the beginning. I even made a bug report about it. But ddadmin said, "It isn't a bug, it's a feature." I had thought to try working out a solution, but one has to pick one's projects, as I'm sure you know . . .

Anyways, hope this works out.

**jscheuer1** · 03-08-2012, 11:14 PM

I actually found the time and it works! Use this updated version of the script (right click and 'save as'):

Attachment 4394

It includes Vic's excellent update fixing that nasty overscroll behavior. Thanks Vic!

It also has code that allows it to respond to the mousewheel using jquery.mousewheel.min.js from (click and save, extract the jquery.mousewheel.min.js file from the archive's jquery-mousewheel-3.0.6 folder):

https://github.com/downloads/brandon...heel-3.0.6.zip

On your page, just use the your updated slickcustomscroll.js script from this post and make a link to your copy of the mousewheel script after the one to jQuery (from your page's source code, addition highlighted):

Code:

.tdback { background-image: url(images/bottom_bar.jpg);}
-->
.style1 {color: #FFFFFF}
.style2 {color: #CCCCCC}
    
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.min.js"></script>

<script src="slickcustomscroll.js">

	/***********************************************
	* Slick Custom Scrollbar script (c) Dynamic Drive (www.dynamicdrive.com)
	* This notice MUST stay intact for legal use
	* Visit http://www.dynamicdrive.com/ for this script and 100s more.
	***********************************************/

</script>


<script type="text/javascript">
    
    /*
        Usage:
            HTML: Insert your content into a DIV element with an unique rel="" attribute.
                <div rel="the-unique-i . . .

That's it!

Demo (use your mousewheel while over either of the scrollers or scrollbars):

http://home.comcast.net/~jscheuer1/s..._scroll_mw.htm

Notes:

If you don't have/use jquery-mousewheel, there will be no error, but neither will there be any mousewheel support.

The browser cache may need to be cleared and/or the page refreshed to see changes.

**ddadmin** · 03-09-2012, 10:27 PM

Wow, very nice additions John and Vic, thanks! I'll most likely incorporate the changes to the official version of the script next week.

**jscheuer1** · 03-10-2012, 04:37 AM

Originally Posted by ddadmin

Wow, very nice additions John and Vic, thanks! I'll most likely incorporate the changes to the official version of the script next week.

Neat! I just updated the script and my demo again to allow for some overscroll, as you had said before it was a feature because it gives it an elastic feel. I've made that the default - a 20px overscroll allowed. You can specify it in the on page call via the bounce parameter if you want different:

Code:

    $( document ).ready( function() {
        $( "div[rel='scrollcontent1']" ).customscroll( { direction: "vertical"} );
        $( "div[rel='scrollcontent2']" ).customscroll( { direction: "horizontal", bounce: 0 } );
    });

With that code (from my updated demo, same address as before), the first scroller allows the default 20px bounce which I think does give it a cool elastic feel without allowing a ton of blank space to be scrolled into view.

The second scroller with bounce: 0 allows no overscroll. It reacts just like an overflow scroll div - no elasticity at the ends.

And it can be set to other values if someone wants to. Like 10, which would still give some elasticity, just not as much as the default. Or 2000 which would in most cases be essentially how the script acted before when there were no limits on overscrollong.

**ddadmin** · 03-20-2012, 03:21 AM

Just a heads up the official version of Slick Scrollbar has just been updated with Vic/John's improvements and labeled v1.1: http://www.dynamicdrive.com/dynamicindex11/scrollc.htm

Thanks again!

Thread: Slick Custom Scrollbar

Thread Tools

Search Thread

Slick Custom Scrollbar

Thank you so so much...

How to allow scrolling while not right over the drag?

Bookmarks

Bookmarks

Posting Permissions