使用jQuery自定义内容滚动器避免图像缩放错误

Question

避免jQuery custom content scroller上的图像缩放错误的最佳做法是什么？

问题的结果是图像设置为width: 100%。添加自定义滚动条后width更改会影响height并减少不再需要滚动条的数量内容。

请参阅下面的示例或jsfiddle：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在包含滚动条.css：

后，将此行添加到css中

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

无论卷轴是否存在，它都会添加边距。

唯一的减号是，即使没有滚动，你也会有余量。

$(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>