https://www.sikkimexpress.com/assets/frontend/js/jquery.phancy.js

1/*!
2 * jQuery Phancy Scroll Plugin 0.2
3 * https://github.com/dereli/phancy
4 *
5 * Copyright 2012-2014 Zubeyr Dereli
6 * Licensed under MIT license (http://opensource.org/licenses/mit-license.php).
7 *
8 * Tested with jQuery 1.8.0
9 *
10 */
11(function( jQuery, undefined ) {
12
13    jQuery.fn.extend({
14        customScroll: function() {
15
16            // measure the default scrollbar width.
17            var tdv = jQuery( "<div><div></div></div>" )
18                .css({
19                    position: "absolute",
20                    left: -1000,
21                    width: 300,
22                    overflow: "scroll"
23                })
24                .appendTo( "body" ),
25                twi = tdv.width() - tdv.find( "div" ).width();
26            tdv.remove();
27
28            return this.each(function() {
29
30                // decorate the element with a scrollbar
31                var that = jQuery( this ),
32                    he = that.outerHeight(),
33                    wi = that.outerWidth();
34
35                var sbp = that.css("direction") === "rtl" ? "left" : "right",
36                    sbf = that.css("direction") === "rtl" ? "right" : "left",
37                    scroller = jQuery( "<div>" )
38                        .addClass( "phancy-scroller" )
39                        .css({
40                            overflow: "hidden",
41                            position: "relative",
42                            height: he,
43                            width: wi,
44                            marginTop: that.css( "margin-top" ),
45                            marginBottom: that.css( "margin-bottom" ),
46                            marginLeft: that.css( "margin-left" ),
47                            marginRight: that.css( "margin-right" ),
48                            float: that.css( "float" ),
49                        }),
50                    scrollarea = jQuery( "<div>" )
51                        .css({
52                            overflow: "scroll",
53                            position: "relative",
54                            height: he + twi,
55                            width: wi + twi
56                        })
57                        .appendTo( scroller ),
58                    scrollareax = jQuery( "<div>" )
59                        .css({ float: sbf })
60                        .appendTo( scrollarea );
61
62                that
63                    .css({
64                        overflow: "visible",
65                        height: "auto",
66                        margin: 0,
67                        float: ""
68                    })
69                    .after( scroller )
70                    .appendTo( scrollareax );
71
72                var nhe = scrollareax.outerHeight( true ),
73                    ratio = Math.min( 1, he / nhe );
74                if ( ratio >= 1 ) {
75                    return;
76                }
77
78                // create scrollbars
79                var scrollbar = jQuery( "<div>" )
80                        .addClass( "phancy-scrollbar" )
81                        .css({ height: he })
82                        .css( sbp, 0 )
83                        .appendTo( scroller ),
84
85                    scrollbarbutton = jQuery( "<div>" )
86                        .addClass( "phancy-scrollbarbutton" )
87                        .css({ height: he * ratio })
88                        .css( sbp, 0 )
89                        .appendTo( scrollbar );
90                that.css({ width: "-=" + scrollbar.css("width") });
91
92                // bind events
93                scroller.scroll(function() {
94                    scroller.scrollLeft( 0 ).scrollTop( 0 ); /* http://stackoverflow.com/q/10036044 */
95                });
96                scrollarea.scroll(function() {
97                    scrollbarbutton.css({
98                        top: scrollarea.scrollTop() * ratio,
99                        height: he * ratio
100                    });
101                });
102
103                (function() {
104                    var dragging = false,
105                        pageY = null,
106                        pageX = null,
107                        top = null,
108                        timer = null;
109
110                    // scroll by clicking on scrollbar itself (page up and down).
111                    scrollbar.on( "mousedown", function( e ) {
112                        if ( e.which !== 1 || jQuery( e.target ).hasClass( "scrollbarbutton" ) )
113                        {
114                            return;
115                        }
116                        top = parseInt( scrollbarbutton.css( "top" ), 10  ) + ( he * ratio * ( e.pageY > scrollbarbutton.offset().top ? 1 : -1 ));
117                        clearTimeout( timer );
118                        timer = setTimeout(function() {
119                            top = Math.min( Math.max( 0, e.pageY - scrollbar.offset().top ) - he * ratio / 2, he - ( he * ratio ) );
120                            scrollbarbutton.css({ top: top });
121                            scrollarea.scrollTop( Math.round( top / ratio ) );
122                        }, 300);
123                        scrollbarbutton.css({ top: top });
124                        scrollarea.scrollTop( Math.round( top / ratio ) );
125                        return false;
126                    });
127
128                    scrollbar.on("mouseup", function() {
129                        clearTimeout( timer );
130                    });
131
132                    // scroll by clicking on scrollbar button (dragging).
133                    scrollbarbutton.on("mousedown", function( e ) {
134                        if ( e.which !== 1 )
135                        {
136                            return;
137                        }
138                        dragging = true;
139                        pageY = e.pageY;
140                        pageX = e.pageX;
141                        top = parseInt( scrollbarbutton.css( "top" ), 10 );
142                        jQuery( document ).on( "mousemove", function( e ) {
143                            if ( dragging ) {
144                                if ( Math.abs( e.pageX - pageX ) < 50 ) {
145                                    var newtop = Math.min( Math.max( 0, top + e.pageY - pageY ), he - he * ratio );
146                                    scrollbarbutton.css( "top", newtop );
147                                    scrollarea.scrollTop( Math.round( newtop / ratio ) );
148                                }
149                                else {
150                                    scrollarea.scrollTop( Math.round( top / ratio ) );
151                                    scrollbarbutton.css({ top: top });
152                                }
153                                return false;
154                            }
155                            else {
156                                jQuery( document ).unbind( "mousemove" );
157                            }
158                        });
159                        return false;
160                    });
161
162                    jQuery( document ).on( "mouseup", function() {
163                        if ( dragging ) {
164                            dragging = false;
165                            jQuery( document ).unbind( "mousemove" );
166                            return false;
167                        }
168                    });
169                })();
170            });
171        }
172    });

173
174})( jQuery );