{"id":13834279,"url":"https://github.com/kamlekar/slim-scroll","last_synced_at":"2025-07-10T04:31:55.015Z","repository":{"id":14540548,"uuid":"17255495","full_name":"kamlekar/slim-scroll","owner":"kamlekar","description":"HTML element scroll bar as replacement for default browser's scroll-bar. Design as you want using CSS.","archived":false,"fork":false,"pushed_at":"2022-01-21T15:43:46.000Z","size":184,"stargazers_count":278,"open_issues_count":10,"forks_count":44,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-11-11T12:57:14.744Z","etag":null,"topics":["animation","css","html","javascript","scroll-library","scrollbar"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kamlekar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-02-27T16:24:41.000Z","updated_at":"2024-10-29T09:02:49.000Z","dependencies_parsed_at":"2022-09-13T01:23:54.968Z","dependency_job_id":null,"html_url":"https://github.com/kamlekar/slim-scroll","commit_stats":null,"previous_names":["venkateshwar/slim-scroll"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kamlekar%2Fslim-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kamlekar%2Fslim-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kamlekar%2Fslim-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kamlekar%2Fslim-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kamlekar","download_url":"https://codeload.github.com/kamlekar/slim-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225618801,"owners_count":17497582,"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":["animation","css","html","javascript","scroll-library","scrollbar"],"created_at":"2024-08-04T14:00:22.730Z","updated_at":"2024-11-20T19:31:46.833Z","avatar_url":"https://github.com/kamlekar.png","language":"HTML","readme":"# Slim-scroll (_JavaScript Scroll Library_)  ~ 4KB compressed\n\nSlim scroll is a replacement of default scrollbar provided by browsers on Windows. This library lets you design the scroll-bar by using simple css properties. It is created using javascript and css.\n\n[Download](https://github.com/kamlekar/slim-scroll/releases/latest)\u0026nbsp;\u0026nbsp;| \u0026nbsp;[Github](https://github.com/venkateshwar/slim-scroll/)\u0026nbsp;\u0026nbsp;| \u0026nbsp;[Demo](https://rawgit.com/venkateshwar/slim-scroll/master/tests/test1/index.html) \u0026nbsp;\u0026nbsp;| \u0026nbsp; [CDNjs](https://cdnjs.com/libraries/slim-scroll)\n\n### [Buy me a :beer: or :coffee:](https://paypal.me/kamlekar)\n\n**Tested on**: IE9+, Chrome and Firefox.\n\n## \n\n### Main Features:\n- Easier to color the custom scrollbar using CSS.\n- Can animate easily (_check below properties for support_).\n- Re-evaluates when the container is fluid, vertically.\n\n### How to use:\n- To make it work, include `slimscroll.js` in `head` tag.\n- Apply height to the container in fixed units or percentage.\n- Just design the scrollbar as you want by applying css classes as explained below.\n- [In IE8] Apply high specificity to override normal styles given to the scroll bar.\n\nand then:\n\n##### Method 1 (_with no added styles_):\n\n    new slimScroll(Element);   // 'Element' is Javascript DOM object\n\n##### Method 2 (_with added styles_):\n\nor to add your own defined css styles:\n\n    new slimScroll(Element, {\n      'wrapperClass': '',\n\n      'scrollBarClass': '',\n\n      'scrollBarContainerClass': '',  \n\n      'scrollBarContainerSpecialClass': '',\n\n      'scrollBarMinHeight': '',\n\n      'scrollBarFixedHeight': '',\n\n      'keepFocus': true/false\n    });\n\n##### Explanation of above properties:\n\n- **wrapperClass** (*type - \"string\"*) : Mention wrapper class here.\n- **scrollBarClass** (*type - \"string\"*) : Mention scroll bar class here.\n- **scrollBarContainerClass** (*type - \"string\"*) : Mention scroll bar container class here.\n- **scrollBarContainerSpecialClass** (*type - \"string\"*) : This property is used to mention a class which will be applied only when the user is scrolling the content. Could be helpful while applying animations to the scroll bar.\n- **scrollBarMinHeight** (*type - \"Integer\"*) : Used to mention minimum scroll bar height here (without pixel unit)\n- **scrollBarFixedHeight** (*type - \"Integer\"*) : Used to mention scroll bar fixed height (without pixel unit). This makes sure to show the scroll bar height fixed even when content inside the container is increased.\n- **keepFocus** (*type - \"Boolean\"*) : Used to focus the container.\n\n### To make this work on height resize:\n\n    var customScroll = new slimScroll();\n    window.onresize = customScroll.resetValues;  // pure javascript example.\n\n### Note:\n\n- Usage of the above mentioned properties is optional or as per need.\n- Add [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) css to override the custom styles which are being applied by this library.\n- Don't override the styles which are given highest specificity (`!important`) by this library (_those styles are necessary to make this scroll library work_).\n\n\n### How I got this thought:\n\nI got this thought, when I found solution to hide the default scrollbar (_using css_) which was the requirement for a post on [Stackoverflow](http://stackoverflow.com/a/16671476/1577396).\n\nThe solution was simple but that is how I got this thought :).\n\n### Future implementations:\n- Implement Horizontal Scrollbar.\n\n---------------------------------\n\nIf you find any issue(s), please file [here](https://github.com/venkateshwar/slim-scroll/issues).\n","funding_links":["https://paypal.me/kamlekar"],"categories":["HTML"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkamlekar%2Fslim-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkamlekar%2Fslim-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkamlekar%2Fslim-scroll/lists"}