jQuery CSS Customizable Scrollbar

  • By Yuriy Khabarov
  • Last update: Dec 15, 2022
  • Comments: 15

jQuery Scrollbar

Cross-browser CSS customizable scrollbar with advanced features:

  • Easy to implement
  • No fixed height or width
  • Responsive design support
  • CSS customizable
  • Standard scroll behavior
  • Vertical, horizontal or both scrollbars
  • Automatically reinitialize scrollbar
  • External scrollbars support
  • Browser support: IE7+, Firefox1, Opera, Chrome, Safari
  • jQuery Scrollbar as Angular.JS directive
  • Textarea scrollbar
  • RTL support2

Basic Scrollbars Demo

Advanced Scrollbars Demo

jQuery Scrollbar as Angular.JS directive

Documentation

Changelog

Download

1 There is known issue that native browser scrollbar cannot be hidden in Firefox on Apple devices, so this plugin is not initialized and you will see native scrollbars. 2 Experimental support in master branch, styles for scrollbars are not updated

Github

https://github.com/gromo/jquery.scrollbar

Comments(15)

  • 1

    incorrect sizing

    hi there, just wondering if anyone else has run into any problems with scrollbars being incorrectly sized. I can't figure out if it's just me or if it's the plugin. I am using the plugin inside of an app that i'm building using backbone marionette. I only init the plugin after inside of onAttach functions, or after the element has been put into the dom, but with the dynamic content i'm loading in asyncly the scrollbars I'm getting are not quite reflective of the amount of content there is. Well, I should say that I'm not sure if it's because of the padding i have on the wrapper inside of the div i'm calling the plugin on, or if it's the content that's being brought in. Has anyone else gotten this problem?

  • 2

    Scrollbar appears on DIV with 100% height

    @gromo As you can see in the screenshot, tmp the scrollbar will also appear on DIVs where no scrollbar is necessary, e.g. on 100% height DIVs.

    Also the scrollbar seems not to update correctly, as you can see here: wrong

    How to avoid that? I would like to try to update the plugin automatically or just remove and reinitialize it, but unfortunately you have not documented such parts...

  • 3

    Not working in Firefox on Apple

    You can't set the height this way on Apple..

    Works fine on Windows with Firefox, Chrome and IE

    .scrollbar_content {
        height:100%;
    }
    
    <div id="scrollbar_id" class="scrollbar_content scrollbar-inner"></div>
    
    $('#scrollbar_id').scrollbar();
    
  • 4

    Some points need to improve!

    I just checked the source at a simple walkthrough, and found something, IMHO, need improvement.

    1. umd support
    2. more angular support
    3. debug property in defaults object is useless
    4. log property in browser object depends on the inner variables debug which is not exposed to the user
    5. some source(this one, this one) use the charactor var. In my view, it's more important that source can be readable rather than short(which can be minify by other tools like uglify)
    6. it there any possibility that write more useful document in the source so that more people(like me:smile:) can participate in improvement
  • 5

    Visible Native Horizontal Scrollbar in IE & Firefox

    I have a sidebar with 100% height and a item menu inside.

    http://jsfiddle.net/mfwonghk/ku9cmv56/

    In 0.2.6 the native horizontal scrollbar is hidden. After updating to 0.2.8 it is visible in IE & Firefox.

    Is this a bug or I need to change my CSS?

  • 6

    scrollbar-content has parent classes

    Why your plugin copy classes from main container to children "scrollbar-content" ???

    https://postimg.org/image/q4h64toix/

    this is very irritating with planing css structure

  • 7

    Scrollbar not showing when chidren's height set in %

    Hi, I'm having some hard time trying to make the bar appear when used inside a list, with its li children's height set as 33.33333% (and 4+ li in a column). The overflow isn't detected, the scrollbar doesn't show. When set in px, no problem at all.

    Here is a fiddle of the issue : http://jsfiddle.net/sylvainjule/zwL0pLng/4/

    I currently get it working by previously formatting the height with jQuery : http://jsfiddle.net/sylvainjule/n3h01tvx/46/

    But wonder if the issue has already shown up / there is a cleaner fix ?

  • 8

    Scroll not rendering on OS X Firefox

    // do not init if in ignorable browser
    if ((browser.mobile && o.ignoreMobile)
            || (browser.overlay && o.ignoreOverlay)
            || (browser.macosx && !browser.webkit) // still required to ignore nonWebKit browsers on Mac
            ) {
        return false;
    }
    

    из-за последней проверки browser.macosx && !browser.webkit кастомные скроллы не редерятся в невебкит браузерах, на Маке, например в Firefox и opera 12

  • 9

    Question: How to debug issues with native scrollbars?

    Hey,

    I have a problem with the plugin in MS Edge: tmp but I also had already problems in other browsers. However, this is my current problem. Of course I would like to fix the appearance of the native scrollbar. But how can I debug this? Unfortunately I am not able to reproduce it on jsfiddle. @gromo do you have any idea?

  • 10

    How to control when scrollbar should appear

    Hi Gromo,

    I am looking for an option, to control height.

    I have panel which has some list items, and i want to activate scrollbar if height of panel is >600px, othervise it should not applied.

    I am trying with fixed height, but problem occurs when that panel have small number of items or nothing at all, blank space remain because of height 600px

    Any way to solve that.

  • 11

    Empty space at bottom on dynamically removing table row

    I have initialized jquery scrollbar on a table. table is having horizontal scroll only. I can add/remove rows dynamically on button click. On adding row there is no issue, however on removing rows, there is empty space at the bottom.

    Is there any solution?

  • 12

    OnScroll event firing before initialize

    I want to start the scrollbar from bottom and prepending data when user scrolled to top.

    
    {
            onInit: function(){
                $('.scroll-Element').scrollTop(100000);
            },
            onScroll: function(y,x){
                if(y.scroll==0&&y.maxScroll>0){
                  // Loading data and prepending
                }
            }
        }
    
    

    But all data loading when initializing.

  • 13

    Firefox , IE and Edge native scrollbar

    On IE and MS Edge the native scrollbar was always appearing behind the scrollbar-macosx.

    Solution for IE and EDGE: Adding to .scroll-wrapper{ -ms-overflow-style : none }

    For Firefox on Windows 10 the native scroll look is showing behind the scrollbar-macosx. Any fix for this? I am using Bootstrap v 3.3.7

  • 14

    Как перейти сразу в конец блока? ("go to end" button)

    Пытаюсь сделать кнопку при нажатии на которую сразу переходим в конец блока. Как это реализовать?

    I try to make a button when I click on it and immediately go to the end of the block. How to implement this?

  • 15

    archive project / search for maintainers

    It seems there are many open issues and pull requests which can be solved.

    Currently there are way too many custom scrollbar solutions on GitHub and no real collaboration between projects and everyone reinvents the same. Would be great to see a few great solutions instead of many with not enough support by the community.