API tools faq
paste
Advertisement
Guest User

scrolltest

a guest
Dec 19th, 2012
647
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.26 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Testing mousewheel plugin</title>
  5.  
  6. <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
  7. <script type="text/javascript">
  8. /*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
  9. * Licensed under the MIT License (LICENSE.txt).
  10. *
  11. * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
  12. * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
  13. * Thanks to: Seamus Leahy for adding deltaX and deltaY
  14. *
  15. * Version: 3.0.6
  16. *
  17. * Requires: 1.2.2+
  18. */
  19.  
  20. (function($) {
  21.  
  22. var types = ['DOMMouseScroll', 'mousewheel'];
  23.  
  24. if ($.event.fixHooks) {
  25.     for ( var i=types.length; i; ) {
  26.         $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
  27.     }
  28. }
  29.  
  30. $.event.special.mousewheel = {
  31.     setup: function() {
  32.         if ( this.addEventListener ) {
  33.             for ( var i=types.length; i; ) {
  34.                 this.addEventListener( types[--i], handler, false );
  35.             }
  36.         } else {
  37.             this.onmousewheel = handler;
  38.         }
  39.     },
  40.    
  41.     teardown: function() {
  42.         if ( this.removeEventListener ) {
  43.             for ( var i=types.length; i; ) {
  44.                 this.removeEventListener( types[--i], handler, false );
  45.             }
  46.         } else {
  47.             this.onmousewheel = null;
  48.         }
  49.     }
  50. };
  51.  
  52. $.fn.extend({
  53.     mousewheel: function(fn) {
  54.         return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
  55.     },
  56.    
  57.     unmousewheel: function(fn) {
  58.         return this.unbind("mousewheel", fn);
  59.     }
  60. });
  61.  
  62.  
  63. function handler(event) {
  64.     var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
  65.     event = $.event.fix(orgEvent);
  66.     event.type = "mousewheel";
  67.    
  68.     // Old school scrollwheel delta
  69.     if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
  70.     if ( orgEvent.detail ) { delta = -orgEvent.detail/3; }
  71.    
  72.     // New school multidimensional scroll (touchpads) deltas
  73.     deltaY = delta;
  74.    
  75.     // Gecko
  76.     if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
  77.        deltaY = 0;
  78.         deltaX = -1*delta;
  79.     }
  80.    
  81.     // Webkit
  82.     if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
  83.     if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
  84.    
  85.     // Add event and delta to the front of the arguments
  86.     args.unshift(event, delta, deltaX, deltaY);
  87.    
  88.     return ($.event.dispatch || $.event.handle).apply(this, args);
  89. }
  90.  
  91. })(jQuery);
  92.  
  93.  
  94. </script>
  95.  
  96. <script type="text/javascript">
  97. $(function() {
  98.     $(document).mousewheel(function(event, delta, deltaX, deltaY) {
  99.         var scrollTop = $(this).scrollTop();
  100.         $(this).scrollTop(scrollTop-(delta*20));
  101.     });
  102. });
  103. </script>
  104. </head>
  105. <body style="overflow:hidden">
  106.  
  107. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae ullamcorper lacus. Praesent eu metus nisl. Fusce vel leo ut enim placerat faucibus. Morbi sagittis ultrices elit, nec accumsan velit lacinia ac. Mauris dictum pulvinar rutrum. Quisque a augue lectus. Curabitur congue dignissim arcu vel congue. Curabitur varius, nibh et vestibulum tincidunt, risus urna luctus est, ac varius dolor risus cursus metus. Sed gravida sodales purus. Praesent sit amet eros imperdiet justo dictum congue. Aenean sit amet sem in quam eleifend suscipit nec non mauris. Proin odio mauris, luctus nec ornare in, ornare eu purus. Donec tortor nibh, porttitor a aliquam nec, suscipit et massa.</p>
  108.  
  109. <p>Proin convallis nibh nec justo mattis accumsan. Nam blandit tincidunt hendrerit. Quisque id purus ut neque elementum tincidunt. Nunc arcu nisl, ultricies sit amet accumsan sit amet, viverra a ipsum. Quisque velit eros, interdum quis ultricies ac, faucibus sed nisi. Morbi nibh orci, commodo ac dictum in, ultrices convallis nisi. Vivamus consequat purus enim. Vestibulum imperdiet elit ac lorem fermentum tristique. Mauris et dolor tempus orci ornare rutrum. Quisque eu sem eget justo ultrices pharetra ac ac nisi.</p>
  110.  
  111. <p>Nulla eget lorem nibh. Proin hendrerit, quam nec elementum dapibus, magna leo euismod lorem, non venenatis magna lorem id eros. Vestibulum nunc lacus, malesuada et auctor vel, laoreet eu nibh. Integer vestibulum pharetra sagittis. Phasellus fringilla lorem vel odio bibendum eu aliquet elit viverra. Vestibulum sodales ultrices arcu ut dictum. Praesent quis ipsum a elit molestie mollis.</p>
  112.  
  113. <p>Donec vel lorem vitae tortor sodales imperdiet a vitae arcu. Nulla facilisi. Quisque non lacus sit amet urna dignissim congue. In neque lacus, pulvinar at congue sed, consectetur eget purus. Mauris rhoncus lobortis sem, at vehicula nunc laoreet ut. Sed vitae sapien nibh. Nam mi lacus, rutrum eget elementum vitae, egestas ac dolor. Aenean vitae mauris quis mauris commodo ornare. Vestibulum lobortis, augue vel posuere tempor, est magna lacinia libero, vitae porta lorem velit eu nisl. Mauris euismod elit eu libero laoreet id bibendum velit malesuada. Vestibulum turpis leo, viverra id sodales et, convallis ut sapien. Etiam eu metus nulla, sit amet bibendum magna. Ut a nunc a urna aliquam condimentum blandit a sapien.</p>
  114.  
  115. <p>Nulla et sapien mi, quis sodales nisi. Pellentesque nec odio at nulla tincidunt convallis aliquet faucibus risus. Nullam leo nisl, sollicitudin sed ullamcorper sed, ultricies ac leo. Aenean fringilla, lorem nec dapibus rutrum, nibh dui commodo risus, at accumsan turpis felis et mauris. Integer bibendum dolor ut orci fermentum nec laoreet ipsum sodales. In gravida nisi dui, id sodales sem. Nullam congue porta tortor, vel mollis elit aliquet vel. Suspendisse eleifend pretium pellentesque.</p>
  116.  
  117. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae ullamcorper lacus. Praesent eu metus nisl. Fusce vel leo ut enim placerat faucibus. Morbi sagittis ultrices elit, nec accumsan velit lacinia ac. Mauris dictum pulvinar rutrum. Quisque a augue lectus. Curabitur congue dignissim arcu vel congue. Curabitur varius, nibh et vestibulum tincidunt, risus urna luctus est, ac varius dolor risus cursus metus. Sed gravida sodales purus. Praesent sit amet eros imperdiet justo dictum congue. Aenean sit amet sem in quam eleifend suscipit nec non mauris. Proin odio mauris, luctus nec ornare in, ornare eu purus. Donec tortor nibh, porttitor a aliquam nec, suscipit et massa.</p>
  118.  
  119. <p>Proin convallis nibh nec justo mattis accumsan. Nam blandit tincidunt hendrerit. Quisque id purus ut neque elementum tincidunt. Nunc arcu nisl, ultricies sit amet accumsan sit amet, viverra a ipsum. Quisque velit eros, interdum quis ultricies ac, faucibus sed nisi. Morbi nibh orci, commodo ac dictum in, ultrices convallis nisi. Vivamus consequat purus enim. Vestibulum imperdiet elit ac lorem fermentum tristique. Mauris et dolor tempus orci ornare rutrum. Quisque eu sem eget justo ultrices pharetra ac ac nisi.</p>
  120.  
  121. <p>Nulla eget lorem nibh. Proin hendrerit, quam nec elementum dapibus, magna leo euismod lorem, non venenatis magna lorem id eros. Vestibulum nunc lacus, malesuada et auctor vel, laoreet eu nibh. Integer vestibulum pharetra sagittis. Phasellus fringilla lorem vel odio bibendum eu aliquet elit viverra. Vestibulum sodales ultrices arcu ut dictum. Praesent quis ipsum a elit molestie mollis.</p>
  122.  
  123. <p>Donec vel lorem vitae tortor sodales imperdiet a vitae arcu. Nulla facilisi. Quisque non lacus sit amet urna dignissim congue. In neque lacus, pulvinar at congue sed, consectetur eget purus. Mauris rhoncus lobortis sem, at vehicula nunc laoreet ut. Sed vitae sapien nibh. Nam mi lacus, rutrum eget elementum vitae, egestas ac dolor. Aenean vitae mauris quis mauris commodo ornare. Vestibulum lobortis, augue vel posuere tempor, est magna lacinia libero, vitae porta lorem velit eu nisl. Mauris euismod elit eu libero laoreet id bibendum velit malesuada. Vestibulum turpis leo, viverra id sodales et, convallis ut sapien. Etiam eu metus nulla, sit amet bibendum magna. Ut a nunc a urna aliquam condimentum blandit a sapien.</p>
  124.  
  125. <p>Nulla et sapien mi, quis sodales nisi. Pellentesque nec odio at nulla tincidunt convallis aliquet faucibus risus. Nullam leo nisl, sollicitudin sed ullamcorper sed, ultricies ac leo. Aenean fringilla, lorem nec dapibus rutrum, nibh dui commodo risus, at accumsan turpis felis et mauris. Integer bibendum dolor ut orci fermentum nec laoreet ipsum sodales. In gravida nisi dui, id sodales sem. Nullam congue porta tortor, vel mollis elit aliquet vel. Suspendisse eleifend pretium pellentesque.</p>
  126.  
  127.  
  128. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae ullamcorper lacus. Praesent eu metus nisl. Fusce vel leo ut enim placerat faucibus. Morbi sagittis ultrices elit, nec accumsan velit lacinia ac. Mauris dictum pulvinar rutrum. Quisque a augue lectus. Curabitur congue dignissim arcu vel congue. Curabitur varius, nibh et vestibulum tincidunt, risus urna luctus est, ac varius dolor risus cursus metus. Sed gravida sodales purus. Praesent sit amet eros imperdiet justo dictum congue. Aenean sit amet sem in quam eleifend suscipit nec non mauris. Proin odio mauris, luctus nec ornare in, ornare eu purus. Donec tortor nibh, porttitor a aliquam nec, suscipit et massa.</p>
  129.  
  130. <p>Proin convallis nibh nec justo mattis accumsan. Nam blandit tincidunt hendrerit. Quisque id purus ut neque elementum tincidunt. Nunc arcu nisl, ultricies sit amet accumsan sit amet, viverra a ipsum. Quisque velit eros, interdum quis ultricies ac, faucibus sed nisi. Morbi nibh orci, commodo ac dictum in, ultrices convallis nisi. Vivamus consequat purus enim. Vestibulum imperdiet elit ac lorem fermentum tristique. Mauris et dolor tempus orci ornare rutrum. Quisque eu sem eget justo ultrices pharetra ac ac nisi.</p>
  131.  
  132. <p>Nulla eget lorem nibh. Proin hendrerit, quam nec elementum dapibus, magna leo euismod lorem, non venenatis magna lorem id eros. Vestibulum nunc lacus, malesuada et auctor vel, laoreet eu nibh. Integer vestibulum pharetra sagittis. Phasellus fringilla lorem vel odio bibendum eu aliquet elit viverra. Vestibulum sodales ultrices arcu ut dictum. Praesent quis ipsum a elit molestie mollis.</p>
  133.  
  134. <p>Donec vel lorem vitae tortor sodales imperdiet a vitae arcu. Nulla facilisi. Quisque non lacus sit amet urna dignissim congue. In neque lacus, pulvinar at congue sed, consectetur eget purus. Mauris rhoncus lobortis sem, at vehicula nunc laoreet ut. Sed vitae sapien nibh. Nam mi lacus, rutrum eget elementum vitae, egestas ac dolor. Aenean vitae mauris quis mauris commodo ornare. Vestibulum lobortis, augue vel posuere tempor, est magna lacinia libero, vitae porta lorem velit eu nisl. Mauris euismod elit eu libero laoreet id bibendum velit malesuada. Vestibulum turpis leo, viverra id sodales et, convallis ut sapien. Etiam eu metus nulla, sit amet bibendum magna. Ut a nunc a urna aliquam condimentum blandit a sapien.</p>
  135.  
  136. <p>Nulla et sapien mi, quis sodales nisi. Pellentesque nec odio at nulla tincidunt convallis aliquet faucibus risus. Nullam leo nisl, sollicitudin sed ullamcorper sed, ultricies ac leo. Aenean fringilla, lorem nec dapibus rutrum, nibh dui commodo risus, at accumsan turpis felis et mauris. Integer bibendum dolor ut orci fermentum nec laoreet ipsum sodales. In gravida nisi dui, id sodales sem. Nullam congue porta tortor, vel mollis elit aliquet vel. Suspendisse eleifend pretium pellentesque.</p>
  137.  
  138. </body>
  139. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!