{"id":13447381,"url":"https://github.com/inuyaksa/jquery.nicescroll","last_synced_at":"2025-05-13T19:04:22.427Z","repository":{"id":1759410,"uuid":"2654070","full_name":"inuyaksa/jquery.nicescroll","owner":"inuyaksa","description":"nicescroll plugin for jquery - scrollbars like iphone/ipad","archived":false,"fork":false,"pushed_at":"2024-01-04T07:55:19.000Z","size":1488,"stargazers_count":3600,"open_issues_count":139,"forks_count":1653,"subscribers_count":169,"default_branch":"master","last_synced_at":"2025-05-11T20:05:09.966Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://nicescroll.areaaperta.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"cjroebuck/spreedly-node","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/inuyaksa.png","metadata":{"files":{"readme":"README.md","changelog":"changelog_3.7.6.txt","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2011-10-26T21:21:11.000Z","updated_at":"2025-04-29T19:41:02.000Z","dependencies_parsed_at":"2024-01-15T22:42:30.117Z","dependency_job_id":"387d4fc1-35c2-4218-8cde-02967c4bbcf4","html_url":"https://github.com/inuyaksa/jquery.nicescroll","commit_stats":{"total_commits":150,"total_committers":50,"mean_commits":3.0,"dds":"0.44666666666666666","last_synced_commit":"fa29e019220e10b7c67a10c07018c3377596b02c"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inuyaksa%2Fjquery.nicescroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inuyaksa%2Fjquery.nicescroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inuyaksa%2Fjquery.nicescroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inuyaksa%2Fjquery.nicescroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/inuyaksa","download_url":"https://codeload.github.com/inuyaksa/jquery.nicescroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254010798,"owners_count":21998993,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T05:01:15.959Z","updated_at":"2025-05-13T19:04:22.410Z","avatar_url":"https://github.com/inuyaksa.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","jQuery Components"],"sub_categories":[],"readme":"# jQuery.NiceScroll\nv. 3.7.6\n\n## The best nicescroll release ever - extremely smooth and consistent in modern browsers and mobile devices, with low resource usage\n\n - [Web Site: nicescroll.areaaperta.com](https://nicescroll.areaaperta.com)\n - [Repo: github.com/inuyaksa/jquery.nicescroll](https://github.com/inuyaksa/jquery.nicescroll)\n - [Twitter: @nicescroll](https://twitter.com/nicescroll)\n\n [![Join the chat at https://gitter.im/inuyaksa/jquery.nicescroll](https://badges.gitter.im/inuyaksa/jquery.nicescroll.svg)](https://gitter.im/inuyaksa/jquery.nicescroll?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n\u003e Nicescroll as a Greasemonkey plugin: http://userscripts.org/scripts/show/119910 (freezed)\n\n\n\u003e Nicescroll is a jQuery plugin, for nice scrollbars with a very similar ios/mobile style.\n\n  - HORIZONAL scrollbar support!\n  - It supports DIVs, IFrames, textarea, and document page (body) scrollbars.\n  - Compatible with all recent desktop browsers and older: Chrome, Firefox, Edge, IE8+, Safari (win/mac), Opera. (all A-grade browsers)\n  - Compatible with mobile devices: iPad/iPhone/iPod, Android 4+, Blackberry phones and Playbook (WebWorks/Table OS), Windows Phone 8 and 10.\n  - Compatible with all touch devices: iPad, Android tablets, Window Surface.\n  - Compabible with multi-input devices (mouse with touch or pen): Window Surface, Chrome Desktop on touch notebook.\n  - Compatible with 2-directional mice: Apple Magic Mouse, Apple Mouser with 2-dir wheel, PC mouse with 2-dir wheel (if browser support it).\n\nWhat you get: customizable and scrollable divs with momentum for iPad and consistent scrollable areas for all desktop and mobile platforms.\n\nSexy zoom feature: you can \"zoom in\" on the content of any nicescroll enabled DIV.\nNice to use and nice to see: all the content of the DIV in fullscreen mode.\nIt works on desktop (double click on div) either in mobile/touch devices using the pinch gesture.\n\nOn modern browsers hardware accelerated scrolling has been implemented.\nUsing animationFrame for smoother and cpu-saving scroll animations. (when browser supports)\n\n\"Use strict\" tested script for maximum code quality.\nBower and AMD ready.\n\nWarning for IE6/IE7 users: support for your browser has been deprecated. (Why do you still use this? Please upgrade to a more stable and modern browser)\n\n\n## FEATURES\n\n- Simple installation and activation: functions with NO modification of your code. (some exceptions can happen, in which case you can write to me.)\n- Very stylish scrollbars with no occupation on your window: original browser scrollbars need some of page space and reduces window/div usable width.\n- You can style main document scrollbar (body) too! (not all devices/browsers support this feature yet)\n- You can scroll by dragging the cursor, mouse wheel (speed customizable), keyboard navigation (cursor keys, pagup/down keys, home/end keys) on all browsers.\n- Scrolling is smooth (like modern tablet browsing). Speed is customizable.\n- Zoom feature.\n- Hardware accelerated scroll (where available).\n- Animation frame support for smooth scrolling and cpu-saving.\n- Dragging scroll mode with scrolling momentum (like touch devices).\n- Tested for all major mobile and desktop browser versions.\n- Support for touch devices.\n- Support for multi-input devices (MSPointer/Pointer support).\n- Compatible with many other browsers and webkit derivatives!\n- Scrollbar has a lot a customizable features.\n- Native scroll events are working.\n- Fully integrated with jQuery.\n- Compatibile with jQuery UI, jQuery Touch, jQuery Mobile\n\n\n## DEPENDENCIES\n\u003e\u003e jQuery is required to be included in your scripts.\n\u003e\u003e Works with jQuery 1.x / 2.x / 3.x branch (slim version don't works)\n\n\n* INSTALLATION\nPut loading script tag after jquery script tag and loading the zoom image in the same folder of the script:\n\n\u003cscript src=\"jquery.nicescroll.js\"\u003e\u003c/script\u003e\n\nWhen using the zoom feature, copy \"zoomico.png\" in to the same folder as jquery.nicescroll.js.\n\n\n* HOW TO USE\n\nALWAYS Initialize nicescroll in a (document) ready statement.\n```javascript\n// 1. Simple mode, it styles document scrollbar:\n$(function() {  \n    $(\"body\").niceScroll();\n});\n\n// 2. Instance with object returned:\nvar nice = false;\n$(function() {  \n    nice = $(\"body\").niceScroll();\n});\n\n// 3. Style a DIV and change cursor color:\n$(function() {  \n    $(\"#thisdiv\").niceScroll({cursorcolor:\"#00F\"});\n});\n\n// 4. DIV with \"wrapper\", formed by two divs, the first is the vieport, the latter is the content:\n$(function() {\n    $(\"#viewportdiv\").niceScroll(\"#wrapperdiv\",{cursorcolor:\"#00F\"});\n});\n\n// 5. Get nicescroll object:\nvar nice = $(\"#mydiv\").getNiceScroll();\n\n// 6. Hide scrollbars:\n$(\"#mydiv\").getNiceScroll().hide();\n\n// 7. Check for scrollbars resize (when content or position have changed):\n$(\"#mydiv\").getNiceScroll().resize();\n\n// 8. Scrolling to a position:\n$(\"#mydiv\").getNiceScroll(0).doScrollLeft(x, duration); // Scroll X Axis\n$(\"#mydiv\").getNiceScroll(0).doScrollTop(y, duration); // Scroll Y Axis\n```\n\n## CONFIGURATION PARAMETERS\nWhen you call \"niceScroll\" you can pass some parameters to custom visual aspects:\n\n```javascript\n$(\"#thisdiv\").niceScroll({\n    cursorcolor: \"#424242\", // change cursor color in hex\n    cursoropacitymin: 0, // change opacity when cursor is inactive (scrollabar \"hidden\" state), range from 1 to 0\n    cursoropacitymax: 1, // change opacity when cursor is active (scrollabar \"visible\" state), range from 1 to 0\n    cursorwidth: \"5px\", // cursor width in pixel (you can also write \"5px\")\n    cursorborder: \"1px solid #fff\", // css definition for cursor border\n    cursorborderradius: \"5px\", // border radius in pixel for cursor\n    zindex: \"auto\" | [number], // change z-index for scrollbar div\n    scrollspeed: 60, // scrolling speed\n    mousescrollstep: 40, // scrolling speed with mouse wheel (pixel)\n    touchbehavior: false, // DEPRECATED!! use \"emulatetouch\"\n    emulatetouch: false, // enable cursor-drag scrolling like touch devices in desktop computer\n    hwacceleration: true, // use hardware accelerated scroll when supported\n    boxzoom: false, // enable zoom for box content\n    dblclickzoom: true, // (only when boxzoom=true) zoom activated when double click on box\n    gesturezoom: true, // (only when boxzoom=true and with touch devices) zoom activated when pinch out/in on box\n    grabcursorenabled: true // (only when touchbehavior=true) display \"grab\" icon\n    autohidemode: true, // how hide the scrollbar works, possible values: \n      true | // hide when no scrolling\n      \"cursor\" | // only cursor hidden\n      false | // do not hide,\n      \"leave\" | // hide only if pointer leaves content\n      \"hidden\" | // hide always\n      \"scroll\", // show only on scroll          \n    background: \"\", // change css for rail background\n    iframeautoresize: true, // autoresize iframe on load event\n    cursorminheight: 32, // set the minimum cursor height (pixel)\n    preservenativescrolling: true, // you can scroll native scrollable areas with mouse, bubbling mouse wheel event\n    railoffset: false, // you can add offset top/left for rail position\n    bouncescroll: false, // (only hw accell) enable scroll bouncing at the end of content as mobile-like \n    spacebarenabled: true, // enable page down scrolling when space bar has pressed\n    railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // set padding for rail bar\n    disableoutline: true, // for chrome browser, disable outline (orange highlight) when selecting a div with nicescroll\n    horizrailenabled: true, // nicescroll can manage horizontal scroll\n    railalign: right, // alignment of vertical rail\n    railvalign: bottom, // alignment of horizontal rail\n    enabletranslate3d: true, // nicescroll can use css translate to scroll content\n    enablemousewheel: true, // nicescroll can manage mouse wheel events\n    enablekeyboard: true, // nicescroll can manage keyboard events\n    smoothscroll: true, // scroll with ease movement\n    sensitiverail: true, // click on rail make a scroll\n    enablemouselockapi: true, // can use mouse caption lock API (same issue on object dragging)\n    cursorfixedheight: false, // set fixed height for cursor in pixel\n    hidecursordelay: 400, // set the delay in microseconds to fading out scrollbars\n    directionlockdeadzone: 6, // dead zone in pixels for direction lock activation\n    nativeparentscrolling: true, // detect bottom of content and let parent to scroll, as native scroll does\n    enablescrollonselection: true, // enable auto-scrolling of content when selection text\n    cursordragspeed: 0.3, // speed of selection when dragged with cursor\n    rtlmode: \"auto\", // horizontal div scrolling starts at left side\n    cursordragontouch: false, // drag cursor in touch / touchbehavior mode also\n    oneaxismousemode: \"auto\", // it permits horizontal scrolling with mousewheel on horizontal only content, if false (vertical-only) mousewheel don't scroll horizontally, if value is auto detects two-axis mouse\n    scriptpath: \"\" // define custom path for boxmode icons (\"\" =\u003e same script path)\n    preventmultitouchscrolling: true // prevent scrolling on multitouch events\n    disablemutationobserver: false // force MutationObserver disabled,\n    enableobserver: true // enable DOM changing observer, it tries to resize/hide/show when parent or content div had changed\n    scrollbarid: false // set a custom ID for nicescroll bars \n});\n```\n\nRelated projects\n----------------\n\n* [Nicescroll for Angular](https://github.com/tushariscoolster/angular-nicescroll)\n\n* LICENSE\n\n## Copyright 2011-17 InuYaksa\n\n###### Licensed under the MIT License, http://www.opensource.org/licenses/mit-license.php\n\n###### Images used for zoom icons have derived from OLPC interface, http://laptop.org/8.2.0/manual/Browse_ChangingView.html\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finuyaksa%2Fjquery.nicescroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finuyaksa%2Fjquery.nicescroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finuyaksa%2Fjquery.nicescroll/lists"}