avoid image scaling bug with jQuery custom content scroller

Question

What is the best practices to avoid the image scaling bug on the jQuery custom content scroller?

The problem result's in that the image is set to a width: 100%. When the custom scroller is added the width change which affects the height and reduces the content of an amount where no scroller is needed anymore.

See the example below or as jsfiddle:

$(document).ready(function () {
    $("#content").mCustomScrollbar({
        axis: 'y',
        theme: 'dark-3'
    });
});

html { background-color: #ccc; }
.container { height: 200px; width:180px; overflow:auto; }
.image { width: 100%; }
.test { background-color: #fff; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.1/jquery.mCustomScrollbar.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.1/jquery.mCustomScrollbar.concat.min.js"></script>

<div id="content" class="container">
   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/NGC_1232.jpg/300px-NGC_1232.jpg" class="image" />
   <div class="test">Astronomy</div>
</div>

Answer 1

add this line to you css after you include scrollbar .css:

.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
    margin-right: 30px;
}

it will add the margin no matter if scroll is present or is not.

The only minus is, even when there is no scroll you will have a margin.

$(document).ready(function () {
    $("#content").mCustomScrollbar({
        axis: 'y',
        theme: 'dark-3'
    });
});

html { background-color: #ccc; }
.container { height: 200px; width:180px; overflow:auto; }
.image { width: 100%; }
.test { background-color: #fff; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.1/jquery.mCustomScrollbar.min.css" rel="stylesheet"/>
<style> 
.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
    margin-right: 30px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.1/jquery.mCustomScrollbar.concat.min.js"></script>

<div id="content" class="container">
   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/NGC_1232.jpg/300px-NGC_1232.jpg" class="image" />
   <div class="test">Astronomy</div>
</div>