{"id":15029876,"url":"https://github.com/automattic/antiscroll","last_synced_at":"2025-05-16T18:06:46.258Z","repository":{"id":1910015,"uuid":"2837334","full_name":"Automattic/antiscroll","owner":"Automattic","description":"OS X Lion style cross-browser native scrolling on the web that gets out of the way.","archived":false,"fork":false,"pushed_at":"2017-10-24T04:55:32.000Z","size":264,"stargazers_count":1069,"open_issues_count":45,"forks_count":163,"subscribers_count":141,"default_branch":"master","last_synced_at":"2025-05-15T03:39:37.222Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"Show-Me-the-Code/python","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Automattic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2011-11-23T16:59:14.000Z","updated_at":"2025-04-09T07:42:02.000Z","dependencies_parsed_at":"2022-07-08T02:10:43.728Z","dependency_job_id":null,"html_url":"https://github.com/Automattic/antiscroll","commit_stats":null,"previous_names":["learnboost/antiscroll"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Automattic%2Fantiscroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Automattic%2Fantiscroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Automattic%2Fantiscroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Automattic%2Fantiscroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Automattic","download_url":"https://codeload.github.com/Automattic/antiscroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254582905,"owners_count":22095518,"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-09-24T20:11:52.677Z","updated_at":"2025-05-16T18:06:46.231Z","avatar_url":"https://github.com/Automattic.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Antiscroll: cross-browser native OS X Lion scrollbars\n\nAntiscroll fixes a fundamental problem JavaScript UI developers commonly face:\nhow do I customize scrollbars so that they get out of the way (for example, for\ndifferent form widgets), but retain their native scrolling properties (like OS\nwidge scrolling velocity, or OS specific inertia)?\n\nAntiscroll addresses this issue by providing a cross-browser implementation of\nthe scrollbars popularized by OS X Lion that retains native properties.\n\n## Features\n\n- Supports mousewheels, trackpads, other input devices natively.\n- Total size is **1kb** minified and gzipped.\n- Doesn't magically autowrap your elements with divs (manual wrapping is necessary,\n  please see `index.html` demo)\n- Fade in/out controlled with CSS3 animations.\n- Shows scrollbars upon hovering.\n- Scrollbars are draggable.\n- Size of container can be dynamically adjusted and scrollbars will adapt.\n- Supports IE7+, Firefox 3+, Chrome, Safari\n\n## Demo\n\nPlease click [here](http://automattic.github.com/antiscroll/) to see it in\naction.\n\n## Installation\n\n1. Wrap scrollable content with the class ```antiscroll-inner```\n1. Wrap the above with the class ```antiscroll-wrap```\n1. Include the following Javascript\n\n```javascript\n   $(function () {\n     $('.antiscroll-wrap').antiscroll();\n   });\n```\n\n### Configuration\n\nYou may remove automatic scrollbar hiding by passing in a key-value to the ```antiscroll()``` function like so:\n\n```javascript\n   $(function () {\n     $('.antiscroll-wrap').antiscroll({\n       autoHide: false\n     });\n   });\n```\n\n## What does it look like?\n\n**Firefox 8 `overflow: scroll` and antiscroll on OS X**\n\n![](http://f.cl.ly/items/3R0y1P1U3r2c0O3Z2533/Image%202011.11.23%208:42:51%20AM.png)\n![](http://f.cl.ly/items/262V403n221p1F3T2S3K/Image%202011.11.23%208:43:32%20AM.png)\n\n**IE 9 `overflow: scroll` and antiscroll**\n\n![](http://f.cl.ly/items/0M0z2t2X42110X3R0313/Image%202011.11.23%2010:35:39%20AM.png)\n\n## How does it work?\n\nThe idea behind Antiscroll is to leverage real scrollbars, but hide them from the\nview. The implementation consists of 3 steps.\n\n### 1. Measure scrollbars width\n\nIn order to measure scrollbars width we use the following technique:\n\n1. Insert a div with a fixed width and measure the inner width\n2. Force `overflow: scroll`\n3. Measure the inner width. The difference is the scrollbar width\n\nThe caveat of this technique is precisely OS X Lion. Since the scrollbars\n_float_ on top of the content, their width is always zero but they still\noverlay your content. To address this issue we add an aditional step which\nconsists of declaring `::-webkit-scrollbar` and `::scrollbar` CSS\npseudo-properties that set the width of the scrollbars to zero for modern\nbrowsers.\n\n### 2. Adjust the width of the inner element\n\nThe parent element receives `overflow: hidden` and the desired width and height\nfor the widget.\n\nThe inner `.antiscroll-inner` element receives the same width and height, but\nthe script augments this two values with the size of the scrollbars,\neffectively hiding them.\n\n![](http://f.cl.ly/items/431G35281X3t052m3J1V/Image%202011.11.23%2010:42:52%20AM.png)\n\nThe inner element is always `overflow: scroll`.\n\n### 3. Listen on the scroll event\n\nWe attach the `scroll` event to the scrollable element, and we create our\nscrollbars as absolutely positioned divs. We update our scrollbars based on the \ndetected `scrollLeft` and `scrollTop` of the element.\n\n## Credits\n\nThis technique was inspired by Facebook's chat sidebar/ticker, which also reproduces\nLion's scrollbars, but relying on setting the width of the inner container to an\narbitrarily large width, therefore allowing scrolling of a single axis\n(vertical).\n\nScrollbar size detection based on the work of [Jonathan\nSharp](http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php).\n\n### Contributors\n\n- Alexandre Rocha Lima e marcondes [@arlm](https://github.com/arlm)\n- Othree [@othree](https://github.com/othree)\n- PG Herveou [@pgherveou](https://github.com/pgherveou)\n- Fontaine Shu [@fontaineshu](https://github.com/fontaineshu) \n\n## Dependencies\n\n- [jQuery](http://github.com/jquery/query)\n- [jquery-mousewheel](https://github.com/brandonaaron/jquery-mousewheel): optional,\n  only needed if you want to block further scrolling when you reach the boundaries\n  of scrollable element.\n\n## TODO\n\n- Automatically leverage Joe Hewitt's\n  [scrollability](https://github.com/joehewitt/scrollability) as a replacement\n  technique if a touch-enabled browser is detected.\n- IE6 support\n\n## License \n\n(The MIT License)\n\nCopyright (c) 2011 Guillermo Rauch \u0026lt;guillermo@learnboost.com\u0026gt;\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n'Software'), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.\nIN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY\nCLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,\nTORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE\nSOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fautomattic%2Fantiscroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fautomattic%2Fantiscroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fautomattic%2Fantiscroll/lists"}