CODEWITHSUNDEEP
javascriptjquerycss
Asim Siddiqui
Asim Siddiqui

Reputation: 309

Custom JQuery Scrollbar Plugin

enter image description here

I am using a custom jquery plugin for scrollbars but its causing the content div to resize, shrinks the width. Check the screenshot I attached. Any comment will be appreciated.

Thanks.

Upvotes: 0

Views: 1199

Answers (2)

malihu
malihu

Reputation: 786

I'm the plugin author.

The script needs to accomodate the actual scrollbar element, so by default, there needs to be a margin (otherwise the scrollbar would appear on top of your content).

The plugin adds the scrollbar inside the element which the scrollbar is applied (the div you use to call the mCustomScrollbar function). It's added inside it and not on its parent as the script cannot possibly know what your parent element is.

The added margin exists in the CSS file so you can change it, remove it etc. easily. Just edit jquery.mCustomScrollbar.css and you'll find it on the very top: 

.mCSB_container{
    width:auto;
    margin-right:30px;
    overflow:hidden;
}

Change/remove the margin-right property to whatever you want.

Additionally, the scrollbar element container (.mCSB_scrollTools) is positioned absolutely, so you can place it wherever you want: 

.mCustomScrollBox>.mCSB_scrollTools{
    width:16px;
    height:100%;
    top:0;
    right:0;
}

To add the scrollbar on a parent element, just call mCustomScrollbar function on your parent div.

All scrollbar design is done via the CSS. In plugin homepage, under section "Styling the scrollbars" there's also a visual representation of all scrollbar markup for easy reference.

Upvotes: 1

Asim Siddiqui
Asim Siddiqui

Reputation: 309

Had to change the scrollbar plugin I was using, now I am using SlimScroll (https://github.com/rochal/jQuery-slimScroll). This is the only scrollbar plugin out there that does not builds its div and force it in the container div automatically resizing the content size. SlimScroll is based on Facebook style scrollbar that becomes a part of the parent div. Thanks to all of those who asked for the code! :)

Upvotes: 0

Related Questions