{"id":20314305,"url":"https://github.com/normandy72/unity-scrollbar","last_synced_at":"2026-05-09T01:39:56.486Z","repository":{"id":150326183,"uuid":"623151917","full_name":"Normandy72/Unity-Scrollbar","owner":"Normandy72","description":"How to create different types of scrollbar in Unity.","archived":false,"fork":false,"pushed_at":"2023-04-12T04:26:06.000Z","size":1322,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-14T12:46:24.773Z","etag":null,"topics":["csharp","scrollbar","unity","unity2d"],"latest_commit_sha":null,"homepage":"","language":"ShaderLab","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/Normandy72.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":"2023-04-03T19:56:59.000Z","updated_at":"2023-04-07T08:55:38.000Z","dependencies_parsed_at":"2023-06-15T20:00:50.225Z","dependency_job_id":null,"html_url":"https://github.com/Normandy72/Unity-Scrollbar","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Normandy72%2FUnity-Scrollbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Normandy72%2FUnity-Scrollbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Normandy72%2FUnity-Scrollbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Normandy72%2FUnity-Scrollbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Normandy72","download_url":"https://codeload.github.com/Normandy72/Unity-Scrollbar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241818842,"owners_count":20025208,"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":["csharp","scrollbar","unity","unity2d"],"created_at":"2024-11-14T18:14:42.062Z","updated_at":"2026-05-09T01:39:56.454Z","avatar_url":"https://github.com/Normandy72.png","language":"ShaderLab","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Instructions\n## Vertical Scrollbar\n1. Create a __Canvas__.\n2. On the Canvas create an __empty GameObject__ (rename it to _VerticalScrollView_) and add a __Scroll Rect__ component to it.\n3. At Scroll Rect you can change parameters:\n    * Horizontal: uncheck\n    * Movement type: Clamped\n    * Inertia: uncheck\n    * Scroll Sensitivity: 20 (or other as you wish)\n4. Inside the VerticalScrollView create an __empty GameObject__ (rename it to _Content_).\n5. Drop __Content__ to property Content in Scroll Rect that attached to VerticalScrollView.\n6. Stretch Content, change a VerticalScrollView size and color (by adding __Image__ component) as you need.\n7. Inside the Content create a content (images, buttons, etc.), change its color or add a source image.\n8. Add __Grid Layout Group__ component to Content. Change parameters as you need. In __Constraint__ parameter check \"Fixed Column Count\" and write down number you need.\n9. In VerticalScrollView create an __empty GameObject__ (rename it to _Mask_), drop Content into Mask, add __Image__ component (change its color or add source image) and __Mask__ component to Mask (uncheck __Show Mask Graphic__), stretch Mask and change its size.\n10. Stretch Content size to allow it scrolling.\n11. Add __Content Size Filter__ component to Content. Set \"Preferred Size\" in Vertical Fit.\n12. In Container set __Pivot__  0.5 (at x axe) and 1 (at y axe).\n\n## Horizontal Scrollbar\n1. Create a __Canvas__.\n2. On the Canvas create an __empty GameObject__ (rename it to _HorizontalScrollView_) and add a __Scroll Rect__ component to it.\n3. At Scroll Rect you can change parameters:\n    * Vertical: uncheck\n    * Movement type: Clamped\n    * Inertia: uncheck\n    * Scroll Sensitivity: 20 (or other as you wish)\n4. Inside the HorizontalScrollView create an __empty GameObject__ (rename it to _Content_).\n5. Drop __Content__ to property Content in Scroll Rect that attached to HorizontalScrollView.\n6. Stretch Content, change a HorizontalScrollView size and color (by adding __Image__ component) as you need.\n7. Inside the Content create a content (images, buttons, etc.), change its color or add a source image.\n8. Add __Grid Layout Group__ component to Content. Change parameters as you need. In __Constraint__ parameter check \"Fixed Row Count\" and write down number you need.\n9. In HorizontalScrollView create an __empty GameObject__ (rename it to _Mask_), drop Content into Mask, add __Image__ component (change its color or add source image) and __Mask__ component to Mask (uncheck __Show Mask Graphic__), stretch Mask and change its size.\n10. Stretch Content size to allow it scrolling.\n11. Add __Content Size Filter__ component to Content. Set \"Preferred Size\" in Horizontal Fit.\n12. In Container set __Pivot__  0 (at x axe) and 0.5 (at y axe).\n\n## Menu Scrollbar\n1. Create a new __Canvas__, change its color.\n2. Add __Scroll View__ to the Canvas.\n3. Change it size (it should be like a screen size) and color.\n4. In Scroll View delete __Scrollbar Vertical__, change hight of __Scrollbar Horizontal__ to 0.\n5. In Scroll Viev -\u003e Viewport -\u003e Content add content (in this case there are buttons).\n6. Create __Button__, change its size and size of Content.\n7. In Content add _Content Size Filter_ component. Set Horizontal Fit to \"Preferred size\".\n8. In Content add _Horizontal Layout Group_ component. Set Child Alignment to \"Middle Left\", change spacing, left and right padding.\n9. In Content dublicate Button 4 times (or more, as you need).\n10. In Scroll View in _Scroll Rect_ component uncheck \"Vertical\".\n11. Create a new script.\n12. In code add logic you need.\n13. Add script to Content.\n14. Add _Scrollbar Horizontal_ to scrollbar field.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnormandy72%2Funity-scrollbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnormandy72%2Funity-scrollbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnormandy72%2Funity-scrollbar/lists"}