├── .gitignore ├── src ├── .DS_Store ├── jquery.dragscroll.css ├── jquery.dragscroll.min.js └── jquery.dragscroll.js ├── example ├── .DS_Store ├── jquery.browser.min.js ├── jquery.mousewheel.js ├── index.html ├── example2.html └── example3.html └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | nbproject 2 | .DS 3 | ._DS 4 | -------------------------------------------------------------------------------- /src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cougar/jquery.dragscroll/master/src/.DS_Store -------------------------------------------------------------------------------- /example/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cougar/jquery.dragscroll/master/example/.DS_Store -------------------------------------------------------------------------------- /src/jquery.dragscroll.css: -------------------------------------------------------------------------------- 1 | .scrolls { cursor: move } 2 | .dragscroll-scroller { overflow: hidden !important } 3 | .dragscroll-container { overflow: visible !important } 4 | .dragscroll-container, 5 | .dragscroll-scroller { position: relative } 6 | .dragscroll-scroller { height: 100% } 7 | .dragscroll-inner { display : block } 8 | .dragscroll-scrollbar-container { 9 | cursor : pointer; 10 | position: absolute; 11 | background: rgb(220,220,220); 12 | background: rgba(0,0,0,.2); 13 | -webkit-border-radius : 5px; 14 | -moz-border-radius : 5px; 15 | border-radius : 5px; 16 | } 17 | .dragscroll-scrollbar-container.autohide { display: none } 18 | .dragscroll-scrollbar-container.h { 19 | width : 100%; 20 | height : 4px; 21 | left : 0; 22 | bottom : -8px; 23 | } 24 | .dragscroll-scrollbar-container.v { 25 | height : 100%; 26 | width : 4px; 27 | top : 0; 28 | right : -8px; 29 | } 30 | .dragscroll-scrollbar.v { 31 | width : 4px; 32 | top : 0; 33 | } 34 | .dragscroll-scrollbar.h { 35 | height : 4px; 36 | left : 0; 37 | } 38 | .dragscroll-scrollbar { 39 | position: absolute; 40 | cursor : pointer; 41 | background: rgb(160,160,160); 42 | background: rgba(0,0,0,.4); 43 | -webkit-border-radius : 5px; 44 | -moz-border-radius : 5px; 45 | border-radius : 5px; 46 | } 47 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jquery.dragscroll.js # 2 | ## a scrolling plugin for the jQuery JavaScript Library ## 3 | 4 | ### PREPARATION ### 5 | 6 | #### Required #### 7 | - include the jquery javascript library in your document 8 | - include jquery.dragscroll.js in your document 9 | - add jquery.dragscroll.css to your page css styles 10 | 11 | #### Optional #### 12 | - if you want mousewheel support, include the jquery.mousewheel plugin before the jquery.dragscroll.js 13 | 14 | ### SETUP ### 15 | 16 | - call this plugin on an overflow hidden container element like: 17 | $('#container').dragscroll(); 18 | 19 | #### Default Setup #### 20 | $('#container').dragscroll({ 21 | scrollBars : true, 22 | autoFadeBars : true, 23 | smoothness : 15, 24 | mouseWheelVelocity : 2 25 | }); 26 | 27 | ### OPTIONS ### 28 | 29 | - scrollBars: boolean // default true. set this, if you want to have scrollbars enabled 30 | - autoFadeBars : boolean // default true. this auto-fades scrollbars in and out while scrolling or hoering over scrollbararea 31 | - smoothness : integer/float // default 15. values between 1 and 18 work best, where 1 is no smoothing 32 | - mouseWheelVelocity : float // default 2. values between 1 and 2 33 | - onScrollStart : function // user callback function when scrolling starts 34 | - onScrollEnds : function // user callback function when scrolling stops 35 | 36 | -------------------------------------------------------------------------------- /example/jquery.browser.min.js: -------------------------------------------------------------------------------- 1 | (function($){$.browserTest=function(a,z){var u='unknown',x='X',m=function(r,h){for(var i=0;i400){r.version='2.0';}if(r.name==='presto'){r.version=($.browser.version>9.27)?'futhark':'linear_b';}r.versionNumber=parseFloat(r.version,10)||0;r.versionX=(r.version!==x)?(r.version+'').substr(0,1):x;r.className=r.name+r.versionX;return r;};a=(a.match(/Opera|Navigator|Minefield|KHTML|Chrome/)?m(a,[[/(Firefox|MSIE|KHTML,\slike\sGecko|Konqueror)/,''],['Chrome Safari','Chrome'],['KHTML','Konqueror'],['Minefield','Firefox'],['Navigator','Netscape']]):a).toLowerCase();$.browser=$.extend((!z)?$.browser:{},c(a,/(camino|chrome|firefox|netscape|konqueror|lynx|msie|opera|safari)/,[],/(camino|chrome|firefox|netscape|netscape6|opera|version|konqueror|lynx|msie|safari)(\/|\s)([a-z0-9\.\+]*?)(\;|dev|rel|\s|$)/));$.layout=c(a,/(gecko|konqueror|msie|opera|webkit)/,[['konqueror','khtml'],['msie','trident'],['opera','presto']],/(applewebkit|rv|konqueror|msie)(\:|\/|\s)([a-z0-9\.]*?)(\;|\)|\s)/);$.os={name:(/(win|mac|linux|sunos|solaris|iphone)/.exec(navigator.platform.toLowerCase())||[u])[0].replace('sunos','solaris')};if(!z){$('html').addClass([$.os.name,$.browser.name,$.browser.className,$.layout.name,$.layout.className].join(' '));}};$.browserTest(navigator.userAgent);})(jQuery); -------------------------------------------------------------------------------- /example/jquery.mousewheel.js: -------------------------------------------------------------------------------- 1 | /*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net) 2 | * Licensed under the MIT License (LICENSE.txt). 3 | * 4 | * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers. 5 | * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix. 6 | * Thanks to: Seamus Leahy for adding deltaX and deltaY 7 | * 8 | * Version: 3.0.4 9 | * 10 | * Requires: 1.2.2+ 11 | */ 12 | 13 | (function($) { 14 | 15 | var types = ['DOMMouseScroll', 'mousewheel']; 16 | 17 | $.event.special.mousewheel = { 18 | setup: function() { 19 | if ( this.addEventListener ) { 20 | for ( var i=types.length; i; ) { 21 | this.addEventListener( types[--i], handler, false ); 22 | } 23 | } else { 24 | this.onmousewheel = handler; 25 | } 26 | }, 27 | 28 | teardown: function() { 29 | if ( this.removeEventListener ) { 30 | for ( var i=types.length; i; ) { 31 | this.removeEventListener( types[--i], handler, false ); 32 | } 33 | } else { 34 | this.onmousewheel = null; 35 | } 36 | } 37 | }; 38 | 39 | $.fn.extend({ 40 | mousewheel: function(fn) { 41 | return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel"); 42 | }, 43 | 44 | unmousewheel: function(fn) { 45 | return this.unbind("mousewheel", fn); 46 | } 47 | }); 48 | 49 | 50 | function handler(event) { 51 | var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0; 52 | event = $.event.fix(orgEvent); 53 | event.type = "mousewheel"; 54 | 55 | // Old school scrollwheel delta 56 | if ( event.wheelDelta ) { delta = event.wheelDelta/120; } 57 | if ( event.detail ) { delta = -event.detail/3; } 58 | 59 | // New school multidimensional scroll (touchpads) deltas 60 | deltaY = delta; 61 | 62 | // Gecko 63 | if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) { 64 | deltaY = 0; 65 | deltaX = -1*delta; 66 | } 67 | 68 | // Webkit 69 | if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; } 70 | if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; } 71 | 72 | // Add event and delta to the front of the arguments 73 | args.unshift(event, delta, deltaX, deltaY); 74 | 75 | return $.event.handle.apply(this, args); 76 | } 77 | 78 | })(jQuery); -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Drag Scroll - default setup 6 | 34 | 35 | 36 | 37 |
38 |
39 |

ANFANG

40 |

Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 41 |

42 |

43 | Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

44 |

45 | Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

46 |

47 | Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.

48 |

49 | Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

50 |

51 | Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo.

52 |

53 | Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

54 |

55 | Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui.

56 |

57 | Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

58 |

59 | Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

60 |

61 | Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

62 |

63 | Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo.

64 |

65 | Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

66 |

67 | Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui.

68 |

69 | Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

70 |

71 | Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

72 |

Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 73 |

74 |

75 | Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

76 |

77 | Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

78 |

79 | Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.

80 |

81 | Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

82 |

83 | Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo.

84 |

85 | Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

86 |

87 | Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui.

88 |

89 | Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

90 |

91 | Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

92 |

93 | Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

94 |

95 | Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo.

96 |

97 | Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

98 |

99 | Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui.

100 |

101 | Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

102 |

103 | Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

104 | 105 |

106 | ENDE

107 |
108 |
109 |
110 | 111 |
112 |
113 | dragscroll – default setup
114 | dragscroll – permanent no scrollbars
115 | dragscroll – permanent scrollbars
116 |
117 | 118 | 119 | 120 | 121 | 140 | 141 | 142 | -------------------------------------------------------------------------------- /example/example2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Drag Scroll - no scrollbars 6 | 34 | 35 | 36 | 37 |
38 |
39 |

ANFANG

40 |

Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 41 |

42 |

43 | Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

44 |

45 | Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

46 |

47 | Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.

48 |

49 | Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

50 |

51 | Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo.

52 |

53 | Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

54 |

55 | Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui.

56 |

57 | Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

58 |

59 | Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

60 |

61 | Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

62 |

63 | Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo.

64 |

65 | Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

66 |

67 | Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui.

68 |

69 | Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

70 |

71 | Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

72 |

Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 73 |

74 |

75 | Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

76 |

77 | Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

78 |

79 | Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.

80 |

81 | Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

82 |

83 | Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo.

84 |

85 | Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

86 |

87 | Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui.

88 |

89 | Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

90 |

91 | Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

92 |

93 | Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

94 |

95 | Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo.

96 |

97 | Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

98 |

99 | Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui.

100 |

101 | Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

102 |

103 | Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

104 | 105 |

106 | ENDE

107 |
108 |
109 |
110 | 111 |
112 |
113 | dragscroll – default setup
114 | dragscroll – permanent no scrollbars
115 | dragscroll – permanent scrollbars
116 |
117 | 118 | 119 | 120 | 121 | 141 | 142 | 143 | -------------------------------------------------------------------------------- /example/example3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Drag Scroll - permanent scrollbars 6 | 34 | 35 | 36 | 37 |
38 |
39 |

ANFANG

40 |

Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 41 |

42 |

43 | Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

44 |

45 | Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

46 |

47 | Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.

48 |

49 | Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

50 |

51 | Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo.

52 |

53 | Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

54 |

55 | Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui.

56 |

57 | Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

58 |

59 | Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

60 |

61 | Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

62 |

63 | Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo.

64 |

65 | Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

66 |

67 | Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui.

68 |

69 | Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

70 |

71 | Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

72 |

Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 73 |

74 |

75 | Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

76 |

77 | Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

78 |

79 | Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.

80 |

81 | Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

82 |

83 | Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo.

84 |

85 | Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

86 |

87 | Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui.

88 |

89 | Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

90 |

91 | Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

92 |

93 | Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

94 |

95 | Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo.

96 |

97 | Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

98 |

99 | Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui.

100 |

101 | Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

102 |

103 | Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

104 | 105 |

106 | ENDE

107 |
108 |
109 |
110 | 111 |
112 |
113 | dragscroll – default setup
114 | dragscroll – permanent no scrollbars
115 | dragscroll – permanent scrollbars
116 |
117 | 118 | 119 | 120 | 121 | 141 | 142 | 143 | -------------------------------------------------------------------------------- /src/jquery.dragscroll.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | *\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 3 | *\\\\\\\\\\\\\/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 4 | *\\\\\\\\\\\\\/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\/\/\/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 5 | *\\\\\\\/\/\\/\\\/\/\/\\\\/\/\/\\\\\/\/\/\\\\\/\\\\\\/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 6 | *\\\\\/\\\\\/\\\/\\\\\\\/\\\\\/\\\/\\\\\/\\\\\\/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\/\\\/\\\\\\\\ 7 | *\\\\\\/\/\/\\\/\\\\\\\\\/\/\/\\\\\/\/\/\\\\\\\\/\\\\\/\/\/\\\/\/\/\\\\/\/\/\\\\/\\\/\\\\\\\\\ 8 | *\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\/\\\\/\\\\\/\\\/\\\\\\\/\\\\\\/\\\\\\/\\\/\\\/\\\\\\\\\\ 9 | *\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\/\\/\\\\\\/\/\/\\\\/\/\/\\\/\\\\\\\/\/\/\\\\\/\\\/\\\\\\\\\\\ 10 | *\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 11 | * 12 | * jquery.dragscroll.js 13 | * a scrolling plugin for the jQuery JavaScript Library 14 | * 15 | * Copyright 2011, Thomas Appel, http://thomas-appel.com, mail(at)thomas-appel.com 16 | * dual licensed under MIT and GPL license 17 | * http://dev.thomas-appel.com/licenses/mit.txt 18 | * http://dev.thomas-appel.com/licenses/gpl.txt 19 | * 20 | * 21 | * 22 | * changelog: 23 | * -------------------------------------------------------------------------------------------- 24 | * - 0.2.b3: 25 | * -------------------------------------------------------------------------------------------- 26 | * - updated example 27 | * - code-refectoring 28 | * - updated minified version 29 | * -------------------------------------------------------------------------------------------- 30 | * - 0.2.b3pre: 31 | * -------------------------------------------------------------------------------------------- 32 | * - fixed MSIE 6+ issues 33 | * -------------------------------------------------------------------------------------------- 34 | * - 0.2.b2pre: 35 | * -------------------------------------------------------------------------------------------- 36 | * - removed some options: onScrollInit, workOnChildElement, onScrollDirChange 37 | * - fixed some problemes 38 | * - changed some internal functions 39 | * - general refactoring issues 40 | * -------------------------------------------------------------------------------------------- 41 | * - 0.2.b1pre: 42 | * -------------------------------------------------------------------------------------------- 43 | * - completely rewrote this plugin 44 | * - added scrollbars 45 | * - added mousewheel support 46 | * -------------------------------------------------------------------------------------------- 47 | * - 0.1.b5b fixed classname removal on plugin destruction 48 | * - 0.1.b5a rewrote almost the whole scrolling mechanism 49 | * - 0.1.b4: rewrote event unbinding (teardown,destroy), plugin is now self destroyable 50 | * - 0.1.b3: fixed event unbinding (teardown) 51 | * - 0.1.b2: fixed touch event support 52 | * - 0.1.b1: plugin teardown method added 53 | * -------------------------------------------------------------------------------------------- 54 | * 55 | * usage: 56 | * -------------------------------------------------------------------------------------------- 57 | * - $('selector').dragscroll(); 58 | * - if jquery.event.destroyed.js is available or if you use javascriptMVC, 59 | * the plugin will detroy itself automatically 60 | * 61 | * - to destroy plugin manually call $('selector').data('dragscroll').destroy(); 62 | * 63 | * - see index.html in example directory for a more complex sample setup 64 | * - visit http://dev.thomas-appel.com/dragscroll for a live demo 65 | * 66 | * 67 | * Features to come: 68 | * -------------------------------------------------------------------------------------------- 69 | * - pageup pagedown key support 70 | * known issues: 71 | * -------------------------------------------------------------------------------------------- 72 | * - MSIE 8 doesn't fade out scrollbar handles 73 | * -------------------------------------------------------------------------------------------- 74 | * @author Thomas Appel 75 | * @version 0.2.b3pre 76 | */(function(a,b){function f(a,b,c){var d=a[0]["scroll"+c]/b["outer"+c]();return[d,Math.floor(b["inner"+c]()/d)]}function g(){this.init.apply(this,arguments)}var c=b.document,d=a(b),e=a.browser.msie&&a.browser.version<9?a("html"):d;g.prototype={name:"dragscroll",isTouchDevice:b.ontouchstart!==void 0},a.extend(g.prototype,{events:{M_DOWN:g.prototype.isTouchDevice?"touchstart."+g.prototype.name:"mousedown."+g.prototype.name,M_UP:g.prototype.isTouchDevice?"touchend."+g.prototype.name:"mouseup."+g.prototype.name,M_MOVE:g.prototype.isTouchDevice?"touchmove."+g.prototype.name:"mousemove."+g.prototype.name,M_ENTER:"mouseenter."+g.prototype.name,M_LEAVE:"mouseleave."+g.prototype.name,M_WHEEL:"mousewheel."+g.prototype.name,S_STOP:"scrollstop."+g.prototype.name,S_START:"scrollstart."+g.prototype.name,SCROLL:"scroll."+g.prototype.name,RESIZE:g.prototype.isTouchDevice?"orientationchange."+g.prototype.name:"resize."+g.prototype.name},init:function(b,c){var d="
",e=this;this.options=c,this.elem=b,this.innerElem=this.elem.wrapInner(d).children(0),this.scrollElem=this.innerElem.wrap(d).parent(),this.elem.addClass(this.name+"-container"),this.innerElem.addClass(this.name+"-inner"),this.scrollElem.addClass(this.name+"-scroller");var f=a(d);this.scrollBarContainer=a([f,f.clone()]),this.scrollBar=a([f.clone(),f.clone()]),this.scrollBarContainer.each(function(a){var b=a===0?"h":"v",c=e.options.autoFadeBars?" autohide":"";e.scrollBarContainer[a].addClass(e.name+"-scrollbar-container "+b+c).append(e.scrollBar[a].addClass(e.name+"-scrollbar "+b)),e._addBars(a)}),this.elem.css("overflow","visible"),this.mx=0,this.my=0,this.__tmp__={_diff_x:0,_diff_y:0,_temp_x:0,_temp_y:0,_x:0,_y:0,_mx:0,_my:0,_deltaX:0,_deltaY:0,_start:{x:0,y:0}},this.__tmp__._scrolls=!1,this._buildIndex(),this.timer=void 0,this._bind(),this.elem.trigger(this.name+"ready")},reInit:function(){return this._buildIndex()},_addBars:function(a){this.options.scrollBars&&this.scrollBarContainer[a].appendTo(this.elem)},_buildIndex:function(){this.barIndex={X:f(this.scrollElem,this.scrollElem,"Width"),Y:f(this.scrollElem,this.scrollElem,"Height")},this._getContainerOffset(),this.scrollBar[0].css({width:this.barIndex.X[1]}),this.scrollBar[1].css({height:this.barIndex.Y[1]}),this.__tmp__._cdd={x:this.options.scrollBars?this.scrollBarContainer[0].innerWidth():this.scrollElem.innerWidth(),y:this.options.scrollBars?this.scrollBarContainer[1].innerHeight():this.scrollElem.innerHeight()},this.barIndex.X[0]===1?this.scrollBarContainer[0].detach():this._addBars(0),this.barIndex.Y[0]===1?this.scrollBarContainer[1].detach():this._addBars(1)},_bind:function(){var b=this;e.bind(this.events.RESIZE,a.proxy(this._buildIndex,this)),this.elem.bind("destroyed",a.proxy(this.teardown,this)),this.elem.bind(this.name+"ready",a.proxy(this.onInitReady,this)),this.elem.delegate("."+this.name+"-scrollbar-container",this.events.M_DOWN,a.proxy(this.scrollStart,this)),this.elem.bind(this.events.M_WHEEL,a.proxy(this.scrollStart,this)),this.scrollElem.bind(this.events.M_DOWN,a.proxy(this.dragScrollStart,this)),this.options.autoFadeBars&&this.elem.delegate("."+this.name+"-scrollbar-container","mouseenter",a.proxy(this.showBars,this)).delegate("."+this.name+"-scrollbar-container","mouseleave",a.proxy(this.hideBars,this)),this.elem.bind(this.events.S_START,function(){b.options.onScrollStart.call(b.elem.addClass("scrolls")),b.options.autoFadeBars&&b.showBars()}).bind(this.events.S_STOP,function(){b.options.onScrollEnd.call(b.elem.removeClass("scrolls")),b.options.autoFadeBars&&b.hideBars()})},_unbind:function(){this.elem.unbind(this.name+"ready").undelegate("."+this.name+"-scrollbar-container",this.events.M_DOWN).undelegate("."+this.name+"-scrollbar-container","mouseenter").undelegate("."+this.name+"-scrollbar-container","mouseleave").unbind(this.events.M_WHEEL).unbind(this.events.S_STOP).unbind(this.events.S_START),this.scrollElem.unbind(this.events.M_DOWN),e.unbind(this.events.M_MOVE).unbind(this.events.M_UP).unbind(this.events.RESIZE)},onInitReady:function(){this.options.autoFadeBars?this.showBars().hideBars():this.showBars()},initMouseWheel:function(b){b==="rebind"?this.elem.unbind(this.events.M_WHEEL).bind(this.events.M_WHEEL,a.proxy(this.scrollStart,this)):this.elem.unbind(this.events.M_WHEEL).bind(this.events.M_WHEEL,a.proxy(this._getMousePosition,this))},_getContainerOffset:function(){this.containerOffset=this.elem.offset()},_pageXY:function(){return g.prototype.isTouchDevice?function(a){return{X:a.originalEvent.touches[0].pageX,Y:a.originalEvent.touches[0].pageY}}:function(a){return{X:a.pageX,Y:a.pageY}}}(),_getScrollOffset:function(){return{x:this.scrollElem[0].scrollLeft,y:this.scrollElem[0].scrollTop}},_getMousePosition:function(a,b,c,d){a.preventDefault();if(!b){var e=this._pageXY.apply(this,arguments);this.mx=this.__tmp__._scrollsX?Math.max(0,Math.min(this.__tmp__._cdd.x,e.X-this.containerOffset.left)):this.mx,this.my=this.__tmp__._scrollsY?Math.max(0,Math.min(this.__tmp__._cdd.y,e.Y-this.containerOffset.top)):this.my}else c=c!==undefined?-c:b,d=d!==undefined?d:b,c=Math.min(5,Math.max(c,-5)),d=Math.min(5,Math.max(d,-5)),this.__tmp__._deltaX=c,this.__tmp__._deltaY=d,c===0&&d===0&&this.scrollStop()},_getWheelDelta:function(){var a=this.scrollElem.innerHeight(),b=this.scrollElem.innerWidth();this.mx-=this.mx<=b?this.__tmp__._deltaX*this.options.mouseWheelVelocity:0,this.my-=this.my<=a?this.__tmp__._deltaY*this.options.mouseWheelVelocity:0,this.mx=Math.min(Math.max(0,this.mx),b),this.my=Math.min(Math.max(0,this.my),a),this.__tmp__._deltaX=null,this.__tmp__._deltaY=null},_getDragScrollPosition:function(){var a,b,c=this.options.smoothness;return this.__tmp__._diff_x=this.__tmp__._diff_x>0?this.__tmp__._diff_x++ -this.__tmp__._diff_x++/c:this.__tmp__._diff_x-- -this.__tmp__._diff_x--/c,this.__tmp__._diff_y=this.__tmp__._diff_y>0?this.__tmp__._diff_y++ -this.__tmp__._diff_y++/c:this.__tmp__._diff_y-- -this.__tmp__._diff_y--/c,a=Math.round(Math.max(Math.min(this.scrollElem[0].scrollLeft+this.__tmp__._diff_x,this.scrollElem[0].scrollWidth),0)),b=Math.round(Math.max(Math.min(this.scrollElem[0].scrollTop+this.__tmp__._diff_y,this.scrollElem[0].scrollHeight),0)),this.__tmp__._x=a,this.__tmp__._y=b,[this.__tmp__._x,this.__tmp__._y]},_hasScrolledSince:function(){var a=this.scrollElem[0].scrollLeft,b=this.scrollElem[0].scrollTop;return{verify:this.__tmp__._temp_x!==a||this.__tmp__._temp_y!==b,scrollLeft:a,scrollTop:b}},_getScrollPosition:function(a,b){var c,d;return c=a*this.barIndex.X[0],d=b*this.barIndex.Y[0],this.__tmp__._x+=(c-this.__tmp__._x)/this.options.smoothness,this.__tmp__._y+=(d-this.__tmp__._y)/this.options.smoothness,[this.__tmp__._x,this.__tmp__._y]},_getDiff:function(){var a=this.scrollElem[0].scrollTop,b=this.scrollElem[0].scrollLeft;this.__tmp__._diff_x=b-this.__tmp__._temp_x,this.__tmp__._diff_y=a-this.__tmp__._temp_y,this.__tmp__._temp_x=b,this.__tmp__._temp_y=a},setScrollbar:function(){this.scrollBar[0].css({left:Math.abs(Math.ceil(this.scrollElem[0].scrollLeft/this.barIndex.X[0]))}),this.scrollBar[1].css({top:Math.abs(Math.ceil(this.scrollElem[0].scrollTop/this.barIndex.Y[0]))})},scroll:function(a,b){var c=this.scrollElem[0].scrollLeft,d=this.scrollElem[0].scrollTop;a=this.__tmp__._scrollsX?Math.round(a):c,b=this.__tmp__._scrollsY?Math.round(b):d,this.scrollElem.scrollLeft(a).scrollTop(b)},scrollStart:function(b,c){this.stopScroll();var d=b.target,f=d===this.scrollBar[0][0],g=d===this.scrollBar[1][0],h=d===this.scrollBarContainer[0][0],i=d===this.scrollBarContainer[1][0];b.preventDefault(),this.scrollElem.unbind(this.events.SCROLL),this.__tmp__._scrollsX=f||h,this.__tmp__._scrollsY=g||i,this._getMousePosition.apply(this,arguments),c?(this.__tmp__._scrollsX=!0,this.__tmp__._scrollsY=!0,this.__tmp__._mode="wheel",this.__tmp__._start.x=0,this.__tmp__._start.y=0,this._checkDragMXYPos(),this.initMouseWheel()):(e.bind(this.events.M_MOVE,a.proxy(this._getMousePosition,this)),e.bind(this.events.M_UP,a.proxy(this.scrollStop,this)),this.__tmp__._start.x=f?this.mx-this.scrollBar[0].offset().left+this.scrollBarContainer[0].offset().left:h?Math.round(this.scrollBar[0].outerWidth()/2):0,this.__tmp__._start.y=g?this.my-this.scrollBar[1].offset().top+this.scrollBarContainer[1].offset().top:i?Math.round(this.scrollBar[1].outerHeight()/2):0,this.__tmp__._mode="scrollbar"),this.startTimer("scrollBPos"),this.elem.trigger(this.events.S_START)},scrollBPos:function(){var a,b,c;this._getDiff(),this.__tmp__._mode==="wheel"&&this._getWheelDelta(),b=Math.min(Math.max(0,this.mx-this.__tmp__._start.x),this.__tmp__._cdd.x-this.barIndex.X[1]),a=Math.min(Math.max(0,this.my-this.__tmp__._start.y),this.__tmp__._cdd.y-this.barIndex.Y[1]),c=this._getScrollPosition(b,a),this.__tmp__._scrollsX&&this.scrollBar[0].css({left:b}),this.__tmp__._scrollsY&&this.scrollBar[1].css({top:a}),this.scroll(c[0],c[1]),this.startTimer("scrollBPos"),this.__tmp__._mode==="wheel"&&this.__tmp__._scrolls&&!this._hasScrolledSince().verify&&this.scrollStop(),this.__tmp__._scrolls||(this.__tmp__._scrolls=!0),this.__tmp__.mx=this.mx,this.__tmp__.my=this.my},scrollStop:function(a){var b=this._hasScrolledSince();e.unbind(this.events.M_MOVE),e.unbind(this.events.M_UP),b.verify?this.startTimer("scrollStop"):(this.stopScroll(),this._clearScrollStatus(!1),this.initMouseWheel("rebind"),this.elem.trigger(this.events.S_STOP),this.__tmp__._mx=null,this.__tmp__._my=null,this.__tmp__._start.x=0,this.__tmp__._start.y=0),this.__tmp__._temp_x=b.scrollLeft,this.__tmp__._temp_y=b.scrollTop},dragScrollStart:function(b){this.stopScroll(),b.preventDefault(),this._clearScrollStatus(!0),this._getMousePosition.apply(this,arguments),this.__tmp__._start.x=this.mx+this.scrollElem[0].scrollLeft,this.__tmp__._start.y=this.my+this.scrollElem[0].scrollTop,e.bind(this.events.M_MOVE,a.proxy(this._getMousePosition,this)),e.bind(this.events.M_UP,a.proxy(this._initDragScrollStop,this)),this.scrollElem.bind(this.events.SCROLL,a.proxy(this.setScrollbar,this)),this.startTimer("dragScrollMove"),this.elem.trigger(this.events.S_START)},_checkDragMXYPos:function(){var a=this._getScrollOffset();this.mx=Math.round(a.x/this.barIndex.X[0]),this.my=Math.round(a.y/this.barIndex.Y[0])},dragScrollMove:function(){this.stop=!1;var a=Math.min(Math.max(this.__tmp__._start.x-this.mx,0),this.scrollElem[0].scrollWidth),b=Math.min(Math.max(this.__tmp__._start.y-this.my,0),this.scrollElem[0].scrollHeight),c=this._getScrollOffset();this._getDiff(),this.scroll(a,b),this.__tmp__.temp_x=c.x,this.__tmp__.temp_y=c.y,this.startTimer("dragScrollMove")},_initDragScrollStop:function(){e.unbind(this.events.M_MOVE),e.unbind(this.events.M_UP),this.elem.removeClass("scrolls"),this.stopScroll(),this.dargScrollStop()},dargScrollStop:function(){var a=this._hasScrolledSince(),b;a.verify?(b=this._getDragScrollPosition(),this.scroll(b[0],b[1]),this.startTimer("dargScrollStop"),this.__tmp__._temp_x=a.scrollLeft,this.__tmp__._temp_y=a.scrollTop):(this.stopScroll(),this.scrollElem.unbind(this.events.SCROLL),this._clearScrollStatus(!1),this.elem.trigger(this.events.S_STOP))},_clearScrollStatus:function(){var a=arguments,b=a.length,c=a[0],d=a[1],e=a[2];b===1&&(d=c,e=c),b===2&&(e=d),this.__tmp__._scrolls=c,this.__tmp__._scrollsX=d,this.__tmp__._scrollsY=e},hideBars:function(){return this.__tmp__._scrolls?this:(this.scrollBarContainer.each(function(){this.stop().delay(100).fadeTo(250,0)}),this)},showBars:function(){return this.scrollBarContainer.each(function(){parseInt(this.css("opacity"),10)<1&&(this.css({opacity:0,display:"block"}),this.stop().delay(100).fadeTo(250,1))}),this},startTimer:function(a){var c=this;this.timer=b.setTimeout(function(){c[a]()},15)},stopScroll:function(){b.clearTimeout(this.timer),this.timer=void 0},teardown:function(b){var c=2;this.elem.removeClass("scrolls"),this._unbind(),this.elem.unbind("destroyed");while(c--)this.scrollBarContainer[c].empty().remove();a.removeData(this.name)}}),a.fn.dragscroll=function(b){var c={scrollClassName:"",scrollBars:!0,smoothness:15,mouseWheelVelocity:2,autoFadeBars:!0,onScrollStart:function(){},onScrollEnd:function(){}},d=a.extend({},c,b),e=this;return this.each(function(){a(this).data(g.prototype.name,new g(e,d))})}})(this.jQuery,this); -------------------------------------------------------------------------------- /src/jquery.dragscroll.js: -------------------------------------------------------------------------------- 1 | /* 2 | *\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 3 | *\\\\\\\\\\\\\/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 4 | *\\\\\\\\\\\\\/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\/\/\/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 5 | *\\\\\\\/\/\\/\\\/\/\/\\\\/\/\/\\\\\/\/\/\\\\\/\\\\\\/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 6 | *\\\\\/\\\\\/\\\/\\\\\\\/\\\\\/\\\/\\\\\/\\\\\\/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\/\\\/\\\\\\\\ 7 | *\\\\\\/\/\/\\\/\\\\\\\\\/\/\/\\\\\/\/\/\\\\\\\\/\\\\\/\/\/\\\/\/\/\\\\/\/\/\\\\/\\\/\\\\\\\\\ 8 | *\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\/\\\\/\\\\\/\\\/\\\\\\\/\\\\\\/\\\\\\/\\\/\\\/\\\\\\\\\\ 9 | *\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\/\\/\\\\\\/\/\/\\\\/\/\/\\\/\\\\\\\/\/\/\\\\\/\\\/\\\\\\\\\\\ 10 | *\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 11 | * 12 | * jquery.dragscroll.js 13 | * a scrolling plugin for the jQuery JavaScript Library 14 | * 15 | * Copyright 2011, Thomas Appel, http://thomas-appel.com, mail(at)thomas-appel.com 16 | * dual licensed under MIT and GPL license 17 | * http://dev.thomas-appel.com/licenses/mit.txt 18 | * http://dev.thomas-appel.com/licenses/gpl.txt 19 | * 20 | * 21 | * 22 | * changelog: 23 | * -------------------------------------------------------------------------------------------- 24 | * - 0.2.b3: 25 | * -------------------------------------------------------------------------------------------- 26 | * - updated example 27 | * - code-refectoring 28 | * - updated minified version 29 | * -------------------------------------------------------------------------------------------- 30 | * - 0.2.b3pre: 31 | * -------------------------------------------------------------------------------------------- 32 | * - fixed MSIE 6+ issues 33 | * -------------------------------------------------------------------------------------------- 34 | * - 0.2.b2pre: 35 | * -------------------------------------------------------------------------------------------- 36 | * - removed some options: onScrollInit, workOnChildElement, onScrollDirChange 37 | * - fixed some problemes 38 | * - changed some internal functions 39 | * - general refactoring issues 40 | * -------------------------------------------------------------------------------------------- 41 | * - 0.2.b1pre: 42 | * -------------------------------------------------------------------------------------------- 43 | * - completely rewrote this plugin 44 | * - added scrollbars 45 | * - added mousewheel support 46 | * -------------------------------------------------------------------------------------------- 47 | * - 0.1.b5b fixed classname removal on plugin destruction 48 | * - 0.1.b5a rewrote almost the whole scrolling mechanism 49 | * - 0.1.b4: rewrote event unbinding (teardown,destroy), plugin is now self destroyable 50 | * - 0.1.b3: fixed event unbinding (teardown) 51 | * - 0.1.b2: fixed touch event support 52 | * - 0.1.b1: plugin teardown method added 53 | * -------------------------------------------------------------------------------------------- 54 | * 55 | * usage: 56 | * -------------------------------------------------------------------------------------------- 57 | * - $('selector').dragscroll(); 58 | * - if jquery.event.destroyed.js is available or if you use javascriptMVC, 59 | * the plugin will detroy itself automatically 60 | * 61 | * - to destroy plugin manually call $('selector').data('dragscroll').destroy(); 62 | * 63 | * - see index.html in example directory for a more complex sample setup 64 | * - visit http://dev.thomas-appel.com/dragscroll for a live demo 65 | * 66 | * 67 | * Features to come: 68 | * -------------------------------------------------------------------------------------------- 69 | * - pageup pagedown key support 70 | * known issues: 71 | * -------------------------------------------------------------------------------------------- 72 | * - MSIE 8 doesn't fade out scrollbar handles 73 | * -------------------------------------------------------------------------------------------- 74 | * @author Thomas Appel 75 | * @version 0.2.b3pre 76 | */ 77 | 78 | (function ($, global) { 79 | var doc = global.document, 80 | //body = $(doc.body), 81 | $global = $(global), 82 | 83 | sc_listener = $.browser.msie && $.browser.version < 9 ? $('html') : $global; 84 | 85 | function scrollbarDimension(c, b, method) { 86 | var a = c[0]['scroll' + method] / b['outer' + method](); 87 | return [a, Math.floor(b['inner' + method]() / a)]; 88 | } 89 | 90 | function DragScroll() { 91 | this.init.apply(this, arguments); 92 | } 93 | 94 | DragScroll.prototype = { 95 | name: 'dragscroll', 96 | isTouchDevice: global.ontouchstart !== void 0 97 | }; 98 | 99 | $.extend(DragScroll.prototype, { 100 | events: { 101 | 102 | M_DOWN: DragScroll.prototype.isTouchDevice ? 'touchstart.' + DragScroll.prototype.name: 'mousedown.' + DragScroll.prototype.name, 103 | M_UP: DragScroll.prototype.isTouchDevice ? 'touchend.' + DragScroll.prototype.name: 'mouseup.' + DragScroll.prototype.name, 104 | M_MOVE: DragScroll.prototype.isTouchDevice ? 'touchmove.' + DragScroll.prototype.name: 'mousemove.' + DragScroll.prototype.name, 105 | M_ENTER: 'mouseenter.' + DragScroll.prototype.name, 106 | M_LEAVE: 'mouseleave.' + DragScroll.prototype.name, 107 | M_WHEEL: 'mousewheel.' + DragScroll.prototype.name, 108 | S_STOP: 'scrollstop.' + DragScroll.prototype.name, 109 | S_START: 'scrollstart.' + DragScroll.prototype.name, 110 | SCROLL: 'scroll.' + DragScroll.prototype.name, 111 | RESIZE: DragScroll.prototype.isTouchDevice ? 'orientationchange.' + DragScroll.prototype.name: 'resize.' + DragScroll.prototype.name 112 | 113 | }, 114 | init: function (elem, options) { 115 | var div = '
', 116 | that = this; 117 | this.options = options; 118 | this.elem = elem; 119 | this.innerElem = this.elem.wrapInner(div).children(0); 120 | this.scrollElem = this.innerElem.wrap(div).parent(); 121 | this.elem.addClass(this.name + '-container'); 122 | this.innerElem.addClass(this.name + '-inner'); 123 | this.scrollElem.addClass(this.name + '-scroller'); 124 | var $div = $(div); 125 | 126 | this.scrollBarContainer = $([$div, $div.clone()]); 127 | this.scrollBar = $([$div.clone(), $div.clone()]); 128 | this.scrollBarContainer.each(function (i) { 129 | var o = i === 0 ? 'h': 'v', 130 | ah = that.options.autoFadeBars ? ' autohide': ''; 131 | that.scrollBarContainer[i].addClass(that.name + '-scrollbar-container ' + o + ah).append(that.scrollBar[i].addClass(that.name + '-scrollbar ' + o)); 132 | that._addBars(i); 133 | }); 134 | 135 | this.elem.css('overflow', 'visible'); 136 | 137 | this.mx = 0; 138 | this.my = 0; 139 | this.__tmp__ = { 140 | _diff_x: 0, 141 | _diff_y: 0, 142 | _temp_x: 0, 143 | _temp_y: 0, 144 | _x: 0, 145 | _y: 0, 146 | _mx: 0, 147 | _my: 0, 148 | _deltaX: 0, 149 | _deltaY: 0, 150 | _start: { 151 | x: 0, 152 | y: 0 153 | } 154 | }; 155 | this.__tmp__._scrolls = false; 156 | this._buildIndex(); 157 | this.timer = void 0; 158 | this._bind(); 159 | this.elem.trigger(this.name + 'ready'); 160 | }, 161 | /** 162 | * call this on changes of the scrollcontainer, e.g updated content, size changes, etc. 163 | */ 164 | reInit: function () { 165 | return this._buildIndex(); 166 | }, 167 | _addBars: function (i) { 168 | if (this.options.scrollBars) { 169 | this.scrollBarContainer[i].appendTo(this.elem); 170 | } 171 | }, 172 | _buildIndex: function () { 173 | this.barIndex = { 174 | X: scrollbarDimension(this.scrollElem, this.scrollElem, 'Width'), 175 | Y: scrollbarDimension(this.scrollElem, this.scrollElem, 'Height') 176 | }; 177 | this._getContainerOffset(); 178 | this.scrollBar[0].css({ 179 | width: this.barIndex.X[1] 180 | }); 181 | this.scrollBar[1].css({ 182 | height: this.barIndex.Y[1] 183 | }); 184 | 185 | this.__tmp__._cdd = { 186 | x: this.options.scrollBars ? this.scrollBarContainer[0].innerWidth() : this.scrollElem.innerWidth(), 187 | y: this.options.scrollBars ? this.scrollBarContainer[1].innerHeight() : this.scrollElem.innerHeight() 188 | }; 189 | this.barIndex.X[0] === 1 ? this.scrollBarContainer[0].detach() : this._addBars(0); 190 | this.barIndex.Y[0] === 1 ? this.scrollBarContainer[1].detach() : this._addBars(1); 191 | 192 | }, 193 | _bind: function () { 194 | var that = this; 195 | sc_listener.bind(this.events.RESIZE, $.proxy(this._buildIndex, this)); 196 | this.elem.bind('destroyed', $.proxy(this.teardown, this)); 197 | this.elem.bind(this.name + 'ready', $.proxy(this.onInitReady, this)); 198 | //this.scrollBarContainer.bind(this.events.M_DOWN,$.proxy(this.scrollStart,this)); 199 | this.elem.delegate('.' + this.name + '-scrollbar-container', this.events.M_DOWN, $.proxy(this.scrollStart, this)); 200 | this.elem.bind(this.events.M_WHEEL, $.proxy(this.scrollStart, this)); 201 | 202 | this.scrollElem.bind(this.events.M_DOWN, $.proxy(this.dragScrollStart, this)); 203 | 204 | if (this.options.autoFadeBars) { 205 | this.elem.delegate('.' + this.name + '-scrollbar-container', 'mouseenter', $.proxy(this.showBars, this)).delegate('.' + this.name + '-scrollbar-container', 'mouseleave', $.proxy(this.hideBars, this)); 206 | } 207 | this.elem.bind(this.events.S_START, function () { 208 | that.options.onScrollStart.call(that.elem.addClass('scrolls')); 209 | that.options.autoFadeBars && that.showBars(); 210 | }).bind(this.events.S_STOP, function () { 211 | that.options.onScrollEnd.call(that.elem.removeClass('scrolls')); 212 | that.options.autoFadeBars && that.hideBars(); 213 | }); 214 | 215 | }, 216 | _unbind: function () { 217 | this.elem.unbind(this.name + 'ready').undelegate('.' + this.name + '-scrollbar-container', this.events.M_DOWN).undelegate('.' + this.name + '-scrollbar-container', 'mouseenter').undelegate('.' + this.name + '-scrollbar-container', 'mouseleave').unbind(this.events.M_WHEEL).unbind(this.events.S_STOP).unbind(this.events.S_START); 218 | this.scrollElem.unbind(this.events.M_DOWN); 219 | sc_listener.unbind(this.events.M_MOVE).unbind(this.events.M_UP).unbind(this.events.RESIZE); 220 | }, 221 | onInitReady: function () { 222 | 223 | if (this.options.autoFadeBars) { 224 | this.showBars().hideBars(); 225 | } else { 226 | this.showBars(); 227 | } 228 | }, 229 | initMouseWheel: function (mode) { 230 | if (mode === 'rebind') { 231 | this.elem.unbind(this.events.M_WHEEL).bind(this.events.M_WHEEL, $.proxy(this.scrollStart, this)); 232 | } else { 233 | this.elem.unbind(this.events.M_WHEEL).bind(this.events.M_WHEEL, $.proxy(this._getMousePosition, this)); 234 | } 235 | }, 236 | 237 | _getContainerOffset: function () { 238 | this.containerOffset = this.elem.offset(); 239 | }, 240 | _pageXY: (function () { 241 | if (DragScroll.prototype.isTouchDevice) { 242 | return function (e) { 243 | return { 244 | X: e.originalEvent.touches[0].pageX, 245 | Y: e.originalEvent.touches[0].pageY 246 | }; 247 | }; 248 | } else { 249 | return function (e) { 250 | return { 251 | X: e.pageX, 252 | Y: e.pageY 253 | }; 254 | }; 255 | } 256 | } ()), 257 | _getScrollOffset: function () { 258 | return { 259 | x: this.scrollElem[0].scrollLeft, 260 | y: this.scrollElem[0].scrollTop 261 | }; 262 | }, 263 | _getMousePosition: function (e, delta, deltaX, deltaY) { 264 | 265 | e.preventDefault(); 266 | 267 | if (!delta) { 268 | var page = this._pageXY.apply(this, arguments); 269 | this.mx = this.__tmp__._scrollsX ? Math.max(0, Math.min(this.__tmp__._cdd.x, page.X - this.containerOffset.left)) : this.mx; 270 | this.my = this.__tmp__._scrollsY ? Math.max(0, Math.min(this.__tmp__._cdd.y, page.Y - this.containerOffset.top)) : this.my; 271 | } else { 272 | 273 | //deltaX = deltaX !== void 0 ? -deltaX : delta; 274 | //deltaY = deltaY !== void 0 ? deltaY : delta; 275 | deltaX = deltaX !== undefined ? - deltaX: delta; 276 | deltaY = deltaY !== undefined ? deltaY: delta; 277 | // try to normalize delta (in case of magic mouse ) 278 | deltaX = Math.min(5, Math.max(deltaX, - 5)); 279 | deltaY = Math.min(5, Math.max(deltaY, - 5)); 280 | 281 | // TODO: revisit mousewheel normalisation 282 | this.__tmp__._deltaX = deltaX; 283 | this.__tmp__._deltaY = deltaY; 284 | // this.__tmp__._deltaX = null; 285 | // this.__tmp__._deltaY = null; 286 | if (deltaX === 0 && deltaY === 0) { 287 | this.scrollStop(); 288 | } 289 | 290 | } 291 | }, 292 | _getWheelDelta: function () { 293 | var mH = this.scrollElem.innerHeight(), 294 | mW = this.scrollElem.innerWidth(); 295 | this.mx -= this.mx <= mW ? this.__tmp__._deltaX * (this.options.mouseWheelVelocity) : 0; 296 | this.my -= this.my <= mH ? this.__tmp__._deltaY * (this.options.mouseWheelVelocity) : 0; 297 | this.mx = Math.min(Math.max(0, this.mx), mW); 298 | this.my = Math.min(Math.max(0, this.my), mH); 299 | this.__tmp__._deltaX = null; 300 | this.__tmp__._deltaY = null; 301 | }, 302 | _getDragScrollPosition: function () { 303 | var tempX, tempY, sm = this.options.smoothness; 304 | 305 | this.__tmp__._diff_x = this.__tmp__._diff_x > 0 ? this.__tmp__._diff_x++ - (this.__tmp__._diff_x++ / sm) : 306 | this.__tmp__._diff_x-- - (this.__tmp__._diff_x-- / 307 | sm); 308 | this.__tmp__._diff_y = this.__tmp__._diff_y > 0 ? this.__tmp__._diff_y++ - (this.__tmp__._diff_y++ / sm) : 309 | this.__tmp__._diff_y-- - (this.__tmp__._diff_y-- / 310 | sm); 311 | 312 | tempX = Math.round(Math.max(Math.min(this.scrollElem[0].scrollLeft + this.__tmp__._diff_x, this.scrollElem[0].scrollWidth), 0)); 313 | tempY = Math.round(Math.max(Math.min(this.scrollElem[0].scrollTop + this.__tmp__._diff_y, this.scrollElem[0].scrollHeight), 0)); 314 | 315 | this.__tmp__._x = tempX; 316 | this.__tmp__._y = tempY; 317 | return [this.__tmp__._x, this.__tmp__._y]; 318 | }, 319 | _hasScrolledSince: function () { 320 | var sl = this.scrollElem[0].scrollLeft, 321 | st = this.scrollElem[0].scrollTop; 322 | return { 323 | verify: this.__tmp__._temp_x !== sl || this.__tmp__._temp_y !== st, 324 | scrollLeft: sl, 325 | scrollTop: st 326 | }; 327 | }, 328 | _getScrollPosition: function (posL, posT) { 329 | var tempX, tempY; 330 | tempX = posL * this.barIndex.X[0]; 331 | tempY = posT * this.barIndex.Y[0]; 332 | 333 | this.__tmp__._x += (tempX - this.__tmp__._x) / this.options.smoothness; 334 | this.__tmp__._y += (tempY - this.__tmp__._y) / this.options.smoothness; 335 | 336 | return [this.__tmp__._x, this.__tmp__._y]; 337 | }, 338 | _getDiff: function () { 339 | var t = this.scrollElem[0].scrollTop, 340 | l = this.scrollElem[0].scrollLeft; 341 | 342 | this.__tmp__._diff_x = l - this.__tmp__._temp_x; 343 | this.__tmp__._diff_y = t - this.__tmp__._temp_y; 344 | this.__tmp__._temp_x = l; 345 | this.__tmp__._temp_y = t; 346 | 347 | }, 348 | 349 | setScrollbar: function () { 350 | this.scrollBar[0].css({ 351 | left: Math.abs(Math.ceil(this.scrollElem[0].scrollLeft / this.barIndex.X[0])) 352 | }); 353 | this.scrollBar[1].css({ 354 | top: Math.abs(Math.ceil(this.scrollElem[0].scrollTop / this.barIndex.Y[0])) 355 | }); 356 | }, 357 | 358 | scroll: function (l, t) { 359 | var sl = this.scrollElem[0].scrollLeft, 360 | st = this.scrollElem[0].scrollTop; 361 | l = this.__tmp__._scrollsX ? Math.round(l) : sl; 362 | t = this.__tmp__._scrollsY ? Math.round(t) : st; 363 | this.scrollElem.scrollLeft(l).scrollTop(t); 364 | }, 365 | /** 366 | * SCROLL START 367 | * ==================================================================================== 368 | */ 369 | scrollStart: function (e, delta) { 370 | this.stopScroll(); 371 | var target = e.target, 372 | targetX = target === this.scrollBar[0][0], 373 | targetY = target === this.scrollBar[1][0], 374 | targetCX = target === this.scrollBarContainer[0][0], 375 | targetCY = target === this.scrollBarContainer[1][0]; 376 | 377 | e.preventDefault(); 378 | 379 | this.scrollElem.unbind(this.events.SCROLL); 380 | 381 | this.__tmp__._scrollsX = targetX || targetCX; 382 | this.__tmp__._scrollsY = targetY || targetCY; 383 | 384 | this._getMousePosition.apply(this, arguments); 385 | 386 | if (delta) { 387 | 388 | this.__tmp__._scrollsX = true; 389 | this.__tmp__._scrollsY = true; 390 | this.__tmp__._mode = 'wheel'; 391 | this.__tmp__._start.x = 0; 392 | this.__tmp__._start.y = 0; 393 | this._checkDragMXYPos(); 394 | this.initMouseWheel(); 395 | } else { 396 | 397 | sc_listener.bind(this.events.M_MOVE, $.proxy(this._getMousePosition, this)); 398 | sc_listener.bind(this.events.M_UP, $.proxy(this.scrollStop, this)); 399 | 400 | this.__tmp__._start.x = targetX ? this.mx - this.scrollBar[0].offset().left + this.scrollBarContainer[0].offset().left: targetCX ? Math.round(this.scrollBar[0].outerWidth() / 2) : 0; 401 | this.__tmp__._start.y = targetY ? this.my - this.scrollBar[1].offset().top + this.scrollBarContainer[1].offset().top: targetCY ? Math.round(this.scrollBar[1].outerHeight() / 2) : 0; 402 | this.__tmp__._mode = 'scrollbar'; 403 | } 404 | 405 | this.startTimer('scrollBPos'); 406 | this.elem.trigger(this.events.S_START); 407 | }, 408 | 409 | scrollBPos: function () { 410 | var t, l, pos; 411 | 412 | this._getDiff(); 413 | if (this.__tmp__._mode === 'wheel') { 414 | this._getWheelDelta(); 415 | } 416 | l = Math.min(Math.max(0, this.mx - this.__tmp__._start.x), this.__tmp__._cdd.x - this.barIndex.X[1]); 417 | t = Math.min(Math.max(0, this.my - this.__tmp__._start.y), this.__tmp__._cdd.y - this.barIndex.Y[1]); 418 | 419 | pos = this._getScrollPosition(l, t); 420 | 421 | this.__tmp__._scrollsX && this.scrollBar[0].css({ 422 | left: l 423 | }); 424 | this.__tmp__._scrollsY && this.scrollBar[1].css({ 425 | top: t 426 | }); 427 | 428 | this.scroll(pos[0], pos[1]); 429 | this.startTimer('scrollBPos'); 430 | 431 | if (this.__tmp__._mode === 'wheel' && this.__tmp__._scrolls && ! this._hasScrolledSince().verify) { 432 | this.scrollStop(); 433 | } 434 | 435 | if (!this.__tmp__._scrolls) { 436 | this.__tmp__._scrolls = true; 437 | } 438 | 439 | this.__tmp__.mx = this.mx; 440 | this.__tmp__.my = this.my; 441 | }, 442 | 443 | scrollStop: function (e) { 444 | var hasScrolled = this._hasScrolledSince(); 445 | 446 | sc_listener.unbind(this.events.M_MOVE); 447 | sc_listener.unbind(this.events.M_UP); 448 | 449 | if (hasScrolled.verify) { 450 | this.startTimer('scrollStop'); 451 | } else { 452 | this.stopScroll(); 453 | this._clearScrollStatus(false); 454 | this.initMouseWheel('rebind'); 455 | this.elem.trigger(this.events.S_STOP); 456 | this.__tmp__._mx = null; 457 | this.__tmp__._my = null; 458 | this.__tmp__._start.x = 0; 459 | this.__tmp__._start.y = 0; 460 | } 461 | this.__tmp__._temp_x = hasScrolled.scrollLeft; 462 | this.__tmp__._temp_y = hasScrolled.scrollTop; 463 | }, 464 | 465 | /** 466 | * DRAGSCROLL START 467 | * ==================================================================================== 468 | */ 469 | 470 | dragScrollStart: function (e) { 471 | this.stopScroll(); 472 | e.preventDefault(); 473 | this._clearScrollStatus(true); 474 | this._getMousePosition.apply(this, arguments); 475 | 476 | this.__tmp__._start.x = this.mx + this.scrollElem[0].scrollLeft; 477 | this.__tmp__._start.y = this.my + this.scrollElem[0].scrollTop; 478 | 479 | // start to record the mouse distance 480 | sc_listener.bind(this.events.M_MOVE, $.proxy(this._getMousePosition, this)); 481 | sc_listener.bind(this.events.M_UP, $.proxy(this._initDragScrollStop, this)); 482 | 483 | this.scrollElem.bind(this.events.SCROLL, $.proxy(this.setScrollbar, this)); 484 | this.startTimer('dragScrollMove'); 485 | this.elem.trigger(this.events.S_START); 486 | }, 487 | _checkDragMXYPos: function () { 488 | var pos = this._getScrollOffset(); 489 | this.mx = Math.round((pos.x) / this.barIndex.X[0]); 490 | this.my = Math.round((pos.y) / this.barIndex.Y[0]); 491 | }, 492 | dragScrollMove: function () { 493 | //this._checkDragMXYPos(); 494 | this.stop = false; 495 | var sl = Math.min(Math.max(this.__tmp__._start.x - this.mx, 0), this.scrollElem[0].scrollWidth), 496 | st = Math.min(Math.max(this.__tmp__._start.y - this.my, 0), this.scrollElem[0].scrollHeight), 497 | scrolled = this._getScrollOffset(); 498 | this._getDiff(); 499 | this.scroll(sl, st); 500 | 501 | this.__tmp__.temp_x = scrolled.x; 502 | this.__tmp__.temp_y = scrolled.y; 503 | 504 | this.startTimer('dragScrollMove'); 505 | }, 506 | _initDragScrollStop: function () { 507 | sc_listener.unbind(this.events.M_MOVE); 508 | sc_listener.unbind(this.events.M_UP); 509 | this.elem.removeClass('scrolls'); 510 | this.stopScroll(); 511 | this.dargScrollStop(); 512 | }, 513 | dargScrollStop: function () { 514 | var hasScrolled = this._hasScrolledSince(), 515 | pos; 516 | 517 | if (hasScrolled.verify) { 518 | pos = this._getDragScrollPosition(); 519 | this.scroll(pos[0], pos[1]); 520 | this.startTimer('dargScrollStop'); 521 | this.__tmp__._temp_x = hasScrolled.scrollLeft; 522 | this.__tmp__._temp_y = hasScrolled.scrollTop; 523 | } else { 524 | 525 | this.stopScroll(); 526 | this.scrollElem.unbind(this.events.SCROLL); 527 | this._clearScrollStatus(false); 528 | this.elem.trigger(this.events.S_STOP); 529 | } 530 | }, 531 | _clearScrollStatus: function () { 532 | var args = arguments, 533 | l = args.length, 534 | a = args[0], 535 | b = args[1], 536 | c = args[2]; 537 | if (l === 1) { 538 | b = a; 539 | c = a; 540 | } 541 | if (l === 2) { 542 | c = b; 543 | } 544 | this.__tmp__._scrolls = a; 545 | this.__tmp__._scrollsX = b; 546 | this.__tmp__._scrollsY = c; 547 | }, 548 | hideBars: function () { 549 | if (this.__tmp__._scrolls) { 550 | return this; 551 | } 552 | this.scrollBarContainer.each(function () { 553 | this.stop().delay(100).fadeTo(250, 0); 554 | }); 555 | return this; 556 | }, 557 | showBars: function () { 558 | 559 | this.scrollBarContainer.each(function () { 560 | if (parseInt(this.css('opacity'), 10) < 1) { 561 | this.css({ 562 | opacity: 0, 563 | display: 'block' 564 | }); 565 | this.stop().delay(100).fadeTo(250, 1); 566 | } 567 | }); 568 | return this; 569 | }, 570 | startTimer: function (fn) { 571 | var that = this; 572 | this.timer = global.setTimeout(function () { 573 | that[fn](); 574 | }, 575 | 15); 576 | }, 577 | stopScroll: function () { 578 | global.clearTimeout(this.timer); 579 | this.timer = void 0; 580 | }, 581 | 582 | teardown: function (e) { 583 | var i = 2; 584 | this.elem.removeClass('scrolls'); 585 | this._unbind(); 586 | this.elem.unbind('destroyed'); 587 | while (i--) { 588 | this.scrollBarContainer[i].empty().remove(); 589 | } 590 | $.removeData(this.name); 591 | } 592 | }); 593 | 594 | $.fn.dragscroll = function (options) { 595 | var defaults = { 596 | scrollClassName: '', 597 | scrollBars: true, 598 | smoothness: 15, 599 | mouseWheelVelocity: 2, 600 | autoFadeBars: true, 601 | onScrollStart: function () {}, 602 | onScrollEnd: function () {} 603 | }, 604 | o = $.extend({}, 605 | defaults, options), 606 | elem = this; 607 | return this.each(function () { 608 | $(this).data(DragScroll.prototype.name, new DragScroll(elem, o)); 609 | }); 610 | }; 611 | } (this.jQuery, this)); 612 | 613 | --------------------------------------------------------------------------------