README 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. jquery.nicescroll
  2. v. 2.0.0 11-03-2011
  3. copyright 2011 InuYaksa*2011
  4. licensed under the MIT
  5. http://areaaperta.com/nicescroll
  6. https://github.com/inuyaksa/jquery.nicescroll
  7. Nicescroll (as nice scroll for browsers) is a jquery (since 1.5) plugin, for nice scrollbars with a very similar ios/mobile style.
  8. It supports DIVs, IFrames and document page (body) scrollbars.
  9. Compatible with Firefox 4+, Chrome 5+, Safari 4+ (win/mac), Opera 10+, IE 6+. (all A-grade browsers)
  10. Compatible with iOS devices as iPad. So you have scrollable divs for iPad.
  11. Sexy zoom feature, you can "zoom-in" the content of any nicescroll'ed div. Nice to use and nice to see, all the content of the div in fullscreen mode. It works on desktop (double click on div) either in mobile/touch devices using pitch gesture.
  12. On modern browsers hardware accelerated scrolling has implemented.
  13. Only vertical scrollbars supported in this version.
  14. Warning for IE6 users (who uses IE6 yet? Please updgrade to a more stable and modern browser), some feature can't work for limitation of the browser. Document (body) scrollbars can't appears, old (native browser) one is used. Some issues with IFrame scrolling.
  15. * FEATURES
  16. - simple installation and activation, it works with NO modification of your code. (some exceptions can happen, so you can write to me)
  17. - very stylish scrollbars, with no occupation on your window (original browser scrollbars need some of page space and reduces window/div usable width)
  18. - you can style main document scrollbar (body) too!! (not all script implements this feature)
  19. - on all browsers you can scroll: dragging the cursor, mouse wheel (speed customizable), keyboard navigation (cursor keys, pagup/down keys, home/end keys)
  20. - scroll is smooth (as modern tablet browsing), speed is customizable
  21. - zoom feature
  22. - hardware accelerated scroll (when available)
  23. - tested for all major browsers desktop and mobile versiones
  24. - support for touch devices
  25. - compatible with many other browsers, including IE6, Safari on Mac and IE10 preview!
  26. - very customizable aspect of bar
  27. - native scroll events are working yet
  28. * DEPENDENCIES
  29. It's a plugin for the jquery framework, you need to include jquery in your scripts.
  30. From 1.5.x version and on. (you can try with 1.4.x also)
  31. * INSTALLATION
  32. Put loading script tag after jquery script tag and loading the zoom image in the same folder of the script:
  33. <script src="jquery.nicescroll.js"></script>
  34. * HOW TO USE
  35. Recall ALWAYS in (document) ready statement.
  36. 1. Simple mode, it styles document scrollbar:
  37. $(document).ready(
  38. function() {
  39. $("body").niceScroll();
  40. }
  41. );
  42. 2. Style scrollbars wit object returned:
  43. var scrollbars = false;
  44. $(document).ready(
  45. function() {
  46. scrollbars = $("body").niceScroll();
  47. }
  48. );
  49. 3. Style a DIV and chage cursor color:
  50. $(document).ready(
  51. function() {
  52. $("#thisdiv").niceScroll({cursorcolor:"#00F"});
  53. }
  54. );
  55. 4. DIV with "wrapper", formed by two divs, the first is the vieport, the latter is the content:
  56. $(document).ready(
  57. function() {
  58. $("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"});
  59. }
  60. );
  61. * CONFIGURATION PARAMETERS
  62. When you call "niceScroll" you can pass some parameters to custom visual aspects:
  63. . cursorcolor - change cursor color in hex, default is "#000000"
  64. . cursoropacitymin - change opacity very cursor is inactive (scrollabar "hidden" state), range from 1 to 0, default is 0 (hidden)
  65. . cursoropacitymax - change opacity very cursor is active (scrollabar "visible" state), range from 1 to 0, default is 1 (full opacity)
  66. . cursorwidth - cursor width in pixel, default is 5 (you can write "5px" too)
  67. . cursorborder - css definition for cursor border, default is "1px solid #fff"
  68. . cursorborderradius - border radius in pixel for cursor, default is "4px"
  69. . zindex - change z-index for scrollbar div, default value is 9999
  70. . scrollspeed - scrolling speed, default value is 60
  71. . mousescrollstep - scrolling speed with mouse wheel, default value is 48 (pixel)
  72. . touchbehavior - enable cursor-drag scrolling like touch devices in desktop computer, default is false
  73. . hwacceleration - use hardware accelerated scroll when supported, default is true
  74. . boxzoom - enable zoom for box content, default is false
  75. . dblclickzoom - (only when boxzoom=true) zoom activated when double click on box, default is true
  76. . gesturezoom - (only when boxzoom=true and with touch devices) zoom activated when pitch out/in on box, default is true
  77. * LICENSE
  78. Copyright 2011*InuYaksa
  79. Licensed under the MIT License, http://www.opensource.org/licenses/mit-license.php
  80. Images used for zoom icons have derived from OLPC interface, http://laptop.org/8.2.0/manual/Browse_ChangingView.html