/

Above is a JSFiddle demonstrating the problem. I invoke the mCustomScrollbar on the parent of the content holder which has overflow in the x direction.

However, you will notice that it modifies the width of the container, and the scrollbar is inactive.

How do I correct this?

http://jsfiddle/3LQJG/2/

Above is a JSFiddle demonstrating the problem. I invoke the mCustomScrollbar on the parent of the content holder which has overflow in the x direction.

However, you will notice that it modifies the width of the container, and the scrollbar is inactive.

How do I correct this?

• javascript
• css
• scrollbar

• I think your external CSS is unavailable, and you didn't include CSS for custom scrollbar, so it does not work. – Gromo Commented Aug 12, 2014 at 6:12
• @Gromo Hey, this updated fiddle should demo the problem appropriately. It includes the relevant scrollbar CSS – Louis93 Commented Aug 12, 2014 at 14:41

2 Answers 2

Look at this example. Look at source code of mCustomScrollbar demo page and you will see that horizontal scrollbar requires:

1. axis:'x'
2. advanced:{autoExpandHorizontalScroll:true} - I don't know what is it for, but without it scrollbar does not work

Also, I've prepared example of jQuery Scrollbar - just to look and try. Scrollbar style is based on container class. Different scrollbar types are available on demo page

Thank you for your correct answer! I was wondering why the horizontal scroll was not working. I modified a little bit as follows:

$(function(){
    var csObj = new Object();
    //csObj.horizontalScroll=true;
    csObj.setWidth=700;
    csObj.setHeight=300;
    csObj.verticalScroll=true;
    csObj.axis="xy";
    csObj.advanced={autoExpandHorizontalScroll:true};
    csObj.scrollButtons = {
        enable:true,
        scrollType:"pixels",
        scrollAmount:300
    };
    csObj.callbacks = {onTotalScroll:finishFunc};
    //csObj.theme="dark";

    $("#content_1").mCustomScrollbar(csObj);
});

I think this style is much easier for better understanding.