{"id":19864373,"url":"https://github.com/cybercookie/light-scroll","last_synced_at":"2025-07-04T13:36:04.103Z","repository":{"id":118937323,"uuid":"112098082","full_name":"CyberCookie/light-scroll","owner":"CyberCookie","description":"lightweight crossbrowser js scrollbar  ","archived":false,"fork":false,"pushed_at":"2017-12-27T14:22:52.000Z","size":8,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-01T00:30:16.712Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CyberCookie.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-26T16:24:28.000Z","updated_at":"2017-11-26T16:48:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"a36d9667-3e3c-4e9a-8a1a-f4f97cceca6a","html_url":"https://github.com/CyberCookie/light-scroll","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/CyberCookie/light-scroll","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyberCookie%2Flight-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyberCookie%2Flight-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyberCookie%2Flight-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyberCookie%2Flight-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CyberCookie","download_url":"https://codeload.github.com/CyberCookie/light-scroll/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CyberCookie%2Flight-scroll/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263550790,"owners_count":23478870,"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-11-12T15:18:27.426Z","updated_at":"2025-07-04T13:36:04.070Z","avatar_url":"https://github.com/CyberCookie.png","language":"JavaScript","readme":"# Light scroll\nCrossbrowser lightweight (only 3kb) JS scrollbar that you can easily restyle and configure. Light scroll supports all the events that native browser scroll does, such as scrollbar drag/click, arrow keys and mouse wheel scrolling.\n\n## Usage\nFirst you should determine which HTML blocks are supposed to be scrollable and add `lightscroll` attribute to such blocks\n````html\n\u003cbody\u003e\n    \u003cdiv id=\"container\" style=\"height:100vh\" lightscroll\u003e\n        \u003c!-- scrollable page --\u003e\n        \u003cdiv lightscroll\u003e \u003c!-- scrollable block --\u003e \u003c/div\u003e\n        \u003cdiv lightscroll\u003e \u003c!-- scrollable block --\u003e\n            \u003cdiv lightscroll\u003e  \u003c!-- scrollable child block --\u003e \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/body\u003e\n````\n\nSince lightscroll init function defined in global window object - you can init lightscroll wherever you want from any corner of your project. Example in your JS code.\n````js\nvar recalculateBlock = window.initLightScroll({\n    /* options */\n})\n\nvar dynamicHeightBlock = document.querySelectorAll('[lightscroll]')[0]\nsetTimeout(() =\u003e { recalculateBlock(dynamicHeightBlock) }, 1000)\n````\nIn example above we init lightScroll, calling `window.initLightScroll()`. Since there is no any hooks in browser to track block height change - you should recalculate block that has dynamic height manually. \nFor such purposes init function returns `recalculateBlock` function. Simply call this function during the phase when height of _lightscroll block_ could be changed passing this lightscroll element.\n\n### options \n`speed` - scroll speed when you use arrows and mouse wheel while scrolling.\n\n### styling\nYou can rewrite scroll styles in your _.css_ file or recompile _.sass_ file using sass compilers.\nLight scroll has 3 states. In _.sass_ file it separated into includes as to bring better user experience. In general mouse hovering over scroll elements determine all the states. Here are 3 _sass includes_ that describes all the states:\n`scroll-initial` - when mouse is not hover a _lightscroll block_\n`scroll-cont-hover` - when mouse is hover _lightscroll block_\n`scroll_hover` - when mosue is hover a scroll bar\n\u003c/br\u003e\nThere is also 4th state you can't controll - scroll bar is hidding completely when _scrollHeigh == clientHeight_ of scroll block, in such cases `scroll-dissabled` class is toggle.\n\nHaving cloned the repository you can open _test.html_ in your browser and check how Light scroll works!\n\u003e So far Light scroll supports only vertical scroll and only desktop(no touch) devices. It's not a \u003e NPM package yet so just simple copy-paste source JS and CSS to your project\n\nAny suggestions and bug reports are welcomed :)\nHave fun\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcybercookie%2Flight-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcybercookie%2Flight-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcybercookie%2Flight-scroll/lists"}