# Customize scrollbar **URL:** \ **Category:** Questions\ **Tags:** gui\ **Created:** [November 12, 2019, 7:59pm UTC](https://forum.babylonjs.com/t/customize-scrollbar/6956 "2019-11-12T19:59:30Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![MartynovOleg](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/martynovoleg/32/4466_2.png) [@MartynovOleg](https://forum.babylonjs.com/u/MartynovOleg)\ **Post date:** [November 12, 2019, 7:59pm UTC](https://forum.babylonjs.com/t/customize-scrollbar/6956/1 "2019-11-12T19:59:30Z")
Hi, the task is to customize the scrollbar with the assets below, I have not found a way to do this, are there any ideas? Thank ) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/3/3cf6269d55f5911216c4511d26c77f55f5b88a8c.jpeg) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/2/29d777471cbc12cce7a9a7afd95166ebd7c0d2e4.png) ---
**Author:** ![Gijs](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/gijs/32/44_2.png) [@Gijs](https://forum.babylonjs.com/u/Gijs)\ **Post date:** [November 12, 2019, 8:42pm UTC](https://forum.babylonjs.com/t/customize-scrollbar/6956/2 "2019-11-12T20:42:08Z")
How about `barColor` and `barBackground`? [https://www.babylonjs-playground.com/#13CF95#65](https://www.babylonjs-playground.com/#13CF95#65) ---
**Author:** ![MartynovOleg](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/martynovoleg/32/4466_2.png) [@MartynovOleg](https://forum.babylonjs.com/u/MartynovOleg)\ **Post date:** [November 12, 2019, 8:53pm UTC](https://forum.babylonjs.com/t/customize-scrollbar/6956/3 "2019-11-12T20:53:39Z")
Thank.Ok, can I change the shape of the scroll bar? To have rounded edges? as in this picture ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/5/5ca0e5ee0528f2efa29afa0bba9370339fc17bad.jpeg) ---
**Author:** ![Drigax](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/drigax/32/16585_2.png) [@Drigax](https://forum.babylonjs.com/u/Drigax)\ **Post date:** [November 12, 2019, 9:27pm UTC](https://forum.babylonjs.com/t/customize-scrollbar/6956/4 "2019-11-12T21:27:03Z")
@MartynovOleg, unfortunately looking at the docs there’s not a lot of customization you can do to the Babylon.GUI.Scrollbar other than basic positioning, color and size. [https://doc.babylonjs.com/api/classes/babylon.gui.scrollbar](https://doc.babylonjs.com/api/classes/babylon.gui.scrollbar) @Deltakosh, got any ideas of how to replicate the wireframe? ---
**Author:** ![MartynovOleg](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/martynovoleg/32/4466_2.png) [@MartynovOleg](https://forum.babylonjs.com/u/MartynovOleg)\ **Post date:** [November 12, 2019, 9:29pm UTC](https://forum.babylonjs.com/t/customize-scrollbar/6956/5 "2019-11-12T21:29:02Z")
It’s sad. Thank you)) I thought maybe there are some workarounds, etc.) ---
**Author:** ![Gijs](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/gijs/32/44_2.png) [@Gijs](https://forum.babylonjs.com/u/Gijs)\ **Post date:** [November 12, 2019, 10:17pm UTC](https://forum.babylonjs.com/t/customize-scrollbar/6956/6 "2019-11-12T22:17:22Z")
Well, it isn’t pretty, but you can always overwrite functions of a GUI component: [https://www.babylonjs-playground.com/#13CF95#66](https://www.babylonjs-playground.com/#13CF95#66) Making an official way to do it would be best of course… ---
**Author:** ![Drigax](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/drigax/32/16585_2.png) [@Drigax](https://forum.babylonjs.com/u/Drigax)\ **Post date:** [November 12, 2019, 10:26pm UTC](https://forum.babylonjs.com/t/customize-scrollbar/6956/7 "2019-11-12T22:26:34Z")
@Gijs Not a bad start! @MartynovOleg you can also look into creating an HTML form for your menu that displays over the BabylonJS Canvas. ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [November 12, 2019, 11:05pm UTC](https://forum.babylonjs.com/t/customize-scrollbar/6956/8 "2019-11-12T23:05:05Z")
Pinging @JohnK as he is the author of the scrollbar ---
**Author:** ![MartynovOleg](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/martynovoleg/32/4466_2.png) [@MartynovOleg](https://forum.babylonjs.com/u/MartynovOleg)\ **Post date:** [November 13, 2019, 8:33am UTC](https://forum.babylonjs.com/t/customize-scrollbar/6956/9 "2019-11-13T08:33:45Z")
Very cool! 🙂 Thank you) ---
**Author:** ![MartynovOleg](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/martynovoleg/32/4466_2.png) [@MartynovOleg](https://forum.babylonjs.com/u/MartynovOleg)\ **Post date:** [November 13, 2019, 8:36am UTC](https://forum.babylonjs.com/t/customize-scrollbar/6956/10 "2019-11-13T08:36:31Z")
will wait)) ---
**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\ **Post date:** [November 13, 2019, 8:52am UTC](https://forum.babylonjs.com/t/customize-scrollbar/6956/11 "2019-11-13T08:52:43Z")
Will have a look at adding image based scrollbars into the scrollviewer unless @Gijs who showed the way to do it would like to do the PR. ---
**Author:** ![MartynovOleg](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/martynovoleg/32/4466_2.png) [@MartynovOleg](https://forum.babylonjs.com/u/MartynovOleg)\ **Post date:** [November 13, 2019, 8:55am UTC](https://forum.babylonjs.com/t/customize-scrollbar/6956/12 "2019-11-13T08:55:39Z")
> [@JohnK](#): > > @Gijs It’s hard for me personally to understand how his code works, but I really want to) ---
**Author:** ![Gijs](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/gijs/32/44_2.png) [@Gijs](https://forum.babylonjs.com/u/Gijs)\ **Post date:** [November 13, 2019, 2:43pm UTC](https://forum.babylonjs.com/t/customize-scrollbar/6956/13 "2019-11-13T14:43:08Z")
@JohnK It would be great if you could implement that feature! @MartynovOleg Mostly the code is from: > But with images instead of filled rectangles ---
**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\ **Post date:** [November 13, 2019, 2:44pm UTC](https://forum.babylonjs.com/t/customize-scrollbar/6956/14 "2019-11-13T14:44:52Z")
Am working on it. Hopefully I should have a PR ready within 24 hours. ---
**Author:** ![MartynovOleg](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/martynovoleg/32/4466_2.png) [@MartynovOleg](https://forum.babylonjs.com/u/MartynovOleg)\ **Post date:** [November 13, 2019, 3:18pm UTC](https://forum.babylonjs.com/t/customize-scrollbar/6956/15 "2019-11-13T15:18:17Z")
Thank!🙂 ---
**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\ **Post date:** [November 15, 2019, 9:36am UTC](https://forum.babylonjs.com/t/customize-scrollbar/6956/16 "2019-11-15T09:36:39Z")
24 Hours was a bit optimistic, especially as I spent a few hours tracking, in the wrong place, an error I made. Should be done over the weekend - fingers crossed. ---
**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\ **Post date:** [November 18, 2019, 6:09pm UTC](https://forum.babylonjs.com/t/customize-scrollbar/6956/17 "2019-11-18T18:09:35Z")
Getting there and now need some help. I have been unable to do two things I wanted to 1. Size the vertical images so that they are thin as in @Gijs example 2. Rotate a landscape image to fit into vertical scroll bar and rotate a portrait image to fit into a horizontal scroll bar. Would you have a look at 1. please @Gijs. I could not work out how to move the drawImage call from your PG into the Babylon.js coding structure for the ScrollViewer. Here is a working example [Scroller](https://tender-murdock-275855.netlify.com/view/test1.html) Javascript code for this is at [oddsNEdnds/babylon.gui.js at master · BabylonJSGuide/oddsNEdnds · GitHub](https://github.com/BabylonJSGuide/oddsNEdnds/blob/master/view/babylon.gui.js) (Note I changed the variable name \_thumbMeasure to \_tempMeasure as that was what it was) How I have done it so far i. Created a new ImageScrollBar class ISB Code [Babylon.js/imageScrollBar.ts at master · BabylonJSGuide/Babylon.js · GitHub](https://github.com/BabylonJSGuide/Babylon.js/blob/master/gui/src/2D/controls/sliders/imageScrollBar.ts) ii. Added an extra parameter to ScrollViewer which when true allows images for the scroll bars see SV Code Line 97 iii. Forced the thumb to be in proportion to the image used and extend the width using thumbSize SV Code lines 378 / 379 iv. Set the measures for the bar background and bar (thumb) ISB lines 92 - 117 which the calls Image.\_draw v. The Image.\_draw call goes to [Babylon.js/image.ts at master · BabylonJSGuide/Babylon.js · GitHub](https://github.com/BabylonJSGuide/Babylon.js/blob/master/gui/src/2D/controls/image.ts) line 615 where the drawImage parameters are set and called depending on a switch state line 648. The ScrollViewer for both ScrollBar and ImageScrollBar go through Line 653 STRETCH\_FILL and the private function \_drawImage is called Line 598 I experimented with creating different switch calls named IMAGE\_VERTICAL, IMAGE\_HORIZONTAL but couldn’t work out the parameters to use to get the same effect as @Gijs. (probably something fairly straight forward but I couldn’t get my head around them, probably shouldn’t have tried to do the rotate at the same time) For 2 I tried using transform and rotate on the canvas image but got completely lost and ended up with my head spinning. In the end I decided it was best to ask for help. Perhaps @Deltakosh could give me some advice. So apologies for not yet completing the feature yet. ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [November 18, 2019, 9:46pm UTC](https://forum.babylonjs.com/t/customize-scrollbar/6956/18 "2019-11-18T21:46:36Z")
If you want to submit a draft PR so we can chat over the code, I’ll gladly help ---
**Author:** ![Gijs](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/gijs/32/44_2.png) [@Gijs](https://forum.babylonjs.com/u/Gijs)\ **Post date:** [November 18, 2019, 10:33pm UTC](https://forum.babylonjs.com/t/customize-scrollbar/6956/19 "2019-11-18T22:33:38Z")
Great work @JohnK, it’s suprisingly confusing all those measurements 😩 Your renaming of `_thumbMeasure` didn’t help, as I thought it was a temporary measure before becoming a current measure, but it actually _is_ the current measure of the thumb 😵 What I have now is just doing a `context.draw` of the `BABYLON.GUI.Image`'s `domImage`, first saving the transform of the context, then translating to the center of the bar, then rotating (0 deg for vertical, 90 deg for horizontal), then drawing the image, then restoring the transform: ``` // Background if (this._backgroundImage) { let transform = context.getTransform(); if (this.isVertical) { this._tempMeasure.left = left - this._effectiveBarOffset; this._tempMeasure.top = this._currentMeasure.top + thumbPosition; this._tempMeasure.width = this._currentMeasure.width; this._tempMeasure.height = this._effectiveThumbThickness; context.translate(this._currentMeasure.left + (this._currentMeasure.width - this._backgroundImage.domImage.naturalWidth) / 2, this._currentMeasure.top + this._currentMeasure.height / 2); context.rotate(0); context.drawImage(this._backgroundImage.domImage, 0, -this._currentMeasure.top / 2 - this._effectiveThumbThickness, this._backgroundImage.domImage.naturalWidth, this._currentMeasure.height); } else { this._tempMeasure.left = this._currentMeasure.left + thumbPosition; this._tempMeasure.top = this._currentMeasure.top; this._tempMeasure.width = this._effectiveThumbThickness; this._tempMeasure.height = this._currentMeasure.height; context.translate(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + (this._currentMeasure.height - this._backgroundImage.domImage.naturalWidth) / 2); context.rotate(Math.PI / 2); context.drawImage(this._backgroundImage.domImage, 0, -this._currentMeasure.width / 2, this._backgroundImage.domImage.naturalWidth, this._currentMeasure.width); } context.setTransform(transform); } ``` Edit: For easy testing, I put your working demo in the Babylon.js root dir of my git clone: [https://pastebin.com/raw/MHBvh75t](https://pastebin.com/raw/MHBvh75t) ---
**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\ **Post date:** [November 19, 2019, 12:27am UTC](https://forum.babylonjs.com/t/customize-scrollbar/6956/20 "2019-11-19T00:27:34Z")
> [@Gijs](#): > > Great work @JohnK, it’s suprisingly confusing all those measurements 😩 Your renaming of `_thumbMeasure` didn’t help, as I thought it was a temporary measure before becoming a current measure, but it actually _is_ the current measure of the thumb Sorry about that. I kept getting confused because it was not a measure of the thumb but was a temporary measure for the thumb and the bar background. [Next page](https://forum.babylonjs.com/t/customize-scrollbar/6956.md?page=2)