Customize ScrollBar via CSS

Hello friends,

I came today with new stuffs of customizing the scrollbar control in JavaFX after long duration. 🙂
First Let’s look over what are the parts of ScrollBar as given in below image below.

 

ScrollBar parts CSS information

 

In the above picture there are four main part of ScrollBar .

  • increment
  • thumb
  • track
  • decrement


Now in this post we are going to just play with only these four style class and at the right of the image above there are some of the events like hover(focus), pressed(mouse pressed) , horizontal(Horizontal specific ScrollBar CSS class) and vertical (Vertical specific ScrollBar CSS class) .

Firstly we are making one demo Application which contain ListView and one Stylesheet .

 

In above FXML we have created two listview with style class naming mylistview. Now we will be using same style class on all over our stylesheets (style.css) Let’s make the scrollbar like below:

 

Css file (style.css)

 

Here we have used following property:

  • -fx-padding: for giving padding space in between the class block
  • -fx-border-color: this give the color for the border of the class
  • -fx-background-radius: makes the background fill radius
  • -fx-background-color: fills the background with the color like red,gree, blue etc.
  • -fx-opacity: the opacity of the class between [0.0-1.0]
  • -fx-background-inset: it’s the insets spaces of specific class.

 
 

 

Now how would you like if you want your scrollbar little bit wider and bigger than it’s default size (like of below image) . To make them wider you can just add -fx-padding property like as below  CSS code.
 
 

Just override your existing CSS (style.css) codes with this few lines of codes

 
 

 
To make the scrollbar little bit small and curvy as well as the arrow button available which is given below can be done by overriding your existing style.css with below codes .

 
 

 
How about removing all those arrows, buttons of increment and decrement i.e only thumb in scrollbar. To accomplish this logic you need to add CSS codes in existing style.css.

Here we are using one more new property of CSS:

  • -fx-shape :  In this property we can keep the SVG shape code inside a String . CSS can take  those SVG path

 

Other More Stylable ScrollBars

 
This the another CSS styled Scrollbar where I’ve used my own custom Shapes on scrollbar thumb class

And this final one Listview contains the image in the scrollbar which looks lot more fancier than ever. Also I’ve used the gradient color at the middle of the scrollbar’s thumb. It looks lot more easier to customize as you like.

It’s really amazing to play with CSS there are even more things to do with CSS in javafx. For more information of the CSS reference there is a link given below

All the source codes of the CSS  is available in below zip file with screenshots as well.

CSS Files: 6 css scrollbar files
CSS Reference: http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html
 
 

Thanks guys for giving interest in this post. Please do feedback about your feelings and thoughts. See you soon 🙂

Tags:

28 thoughts on “Customize ScrollBar via CSS”

  1. anatolnsk

    Hello, Narayan!

    I have a problem with build 2.2.16 and this line:

    Error message is “URL is not a valid type”
    If ‘URL’ change to ‘url’ – another error : “Invalid property”

    Could you suggest reasons?

    WBR, Anatoly!

  3. Narayan G. Maharjan

    Hi anatolnsk,

    If it’s happening from FXML then please use coding wise to add CSS Stylesheet instead of from FXML
    like below

    scene.getStylesheets().add("file:\C:\style.css"); // or from relative path

    Thanks

  4. anatolnsk

    Oh, it really works! ( Is it a bug with url from fxml ? )

    I only populated listviews with labels and now it certainly rocks!

    Tnx for blog!

  5. Pingback: Java desktop links of the week, July 16 | Jonathan Giles

  8. shano

    i want to know how it will be apply on HTML???what will be source code write on html page??please tell me about it..i want to know it.

  9. Narayan G. Maharjan

    Hi shano,
    I’ve not yet done that on real HTML. But as i know I’ve seen in facebook scrollbar (Timeline Scrollbar) they are making their own scrollbar ie. there are Two scroll bar one is their own and other is the browser default. They actually hide the browser default scrollbar and shows their own scrollbar using the Javascript.

    Thanks

  10. Nick

    Hey, thanks for the CSS magic. Do you have by any chance SplitPane related CSS setup? I managed to use -fx-shape to get rid of handler, but have no idea how to make it as thin as possible. Like in iTunes or JavaFX Scene Builder itself

  11. Narayan G. Maharjan

    Hi @Nick,
    For making your splitpane as think as possible. You need to first set the class of the splitpane and edit via CSS.
    Let’s suppose your splitpane user-defined css class is set to “mysplit” then to make your splitpane very thin you can use this css.

    CSS CODE:

    I think it will solve your problem.

    Thanks
    Narayan

  14. Jay

    Hi, Nice blog!!
    Based on your blog, now I can customize the scroll bar for my application.
    But, I can’t have the couple of horizontal lines (thumbnails ?) inside thumb of my scrollbar…

    Can you please give me any comments on this ?

  15. Narayan G. Maharjan

    @Jay
    To add the lines inside the thumb you can choose either to use with the SVG or background tricks. I’ve already attached the source of all scrollbar shown in the post. May be this line will help you.

    /* Add this in your thumb class */
    -fx-background-color:
    linear-gradient( to bottom,
    -mycolor 46%,
    -mycolor2 47%,
    -mycolor 48%,
    -mycolor2 49%,
    -mycolor 50%,
    -mycolor2 51%,
    -mycolor 52%,
    -mycolor2 53%,
    -mycolor 54%

    )

  16. Pingback: JavaFX | Annotary

  18. Nilos

    Hi is there any way to set the width/height of a scrollbar ‘s thumb ?
    Because i want to set a custom image in the thumb and its not fit well

  20. TheRed Primus

    How to add scrolling action using scene builder.
    We’ve 3 scrolling related options in “Code” section.
    So how to add scrolling using them.

  24. Radu

    Good blog Narayan.
    I am trying to display the vertical scroll bar in TableView all the time instead of only when overflow occurs. The following doesn’t work:

    .tableView .scroll-bar:vertical { -fx-visibility: visible; }

    Can you help me out? Thanks

  25. Bless Jerusalem nation now

    Excellent post. Keep writing such kind of information on your site.

    Im really impressed by your site.
    Hey there, You’ve performed an excellent job. I will definitely digg it and for my part suggest to my
    friends. I’m sure they’ll be benefited from this website.

  27. agropecuaria

    Exceptional post but I was wondering if you could write a
    litte more on this subject? I’d be very grateful if you could elaborate a little bit more.

    Many thanks!

  28. Hal

    Thanks for giving details I could find no where else, particularly how to style the TextArea scroll bar thumb. But, isn’t it a mistake to refer to the TextArea by the name of the reference variable when preceded by a period? My understanding is that when the identifier is preceded by a period it must be a modified name of the class, i.e. “text-area”.

Leave a Reply