Grow your CSS skills. Land your dream job.

How to add custom style to scrolls

  • # January 30, 2013 at 5:31 pm

    Hello to everyone!

    I have created some scrolled content with “jscrollpane” plugin.

    It’s working really good but it is using the same class for left and right or top and bottom buttons.

    If you take a look at here :http://jsfiddle.net/7EYrk/

    it is using a calss for buttons with background color but I want to change them to left and right or top and bottom arrow icons.

    How should I do that?

    # January 30, 2013 at 5:33 pm

    You can create a custom scroll bar by simply using CSS. Its very easy and styles both vertical and horizontal scroll bars. [This should help you](http://css-tricks.com/custom-scrollbars-in-webkit/ “”)

    # January 31, 2013 at 1:17 am

    Thanks but the way you showed is working on webkit browser and I want it to work the same in all major browsers.

    This plugin is very simple to use and the only problem I have is using different styles for left and right buttons.

    # February 2, 2013 at 6:02 am

    I think there will be a way to creating what I want.

    Please, help me!

    Thanks.

    # February 2, 2013 at 7:59 am

    Thanks Miller!

    This is exactly what I want but there is a problem.

    I’m using jQuery 1.7.2 and this plugin is using 1.2.6 version in it’s demo pages and when I put this javascript file in my pages other plugins don’t wok.

    How can I solve the problem?

    # February 2, 2013 at 7:03 pm

    I created this scroll bars in jsfiddle with 2 different versions of jQuery library and found that it’s exactly why scrolls don’t work in my template.

    I found there is some code in jQuery 1.4.2 which is different in 1.7.2 version which is I’m using but really couldn’t find where the different is.

    Please help to make it works.

    # February 2, 2013 at 9:48 pm

    maybe try downloading the latest version of jscrollpane.

    https://github.com/vitch/jScrollPane

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".