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

【问题标题】：avoid image scaling bug with jQuery custom content scroller使用 jQuery 自定义内容滚动器避免图像缩放错误
【发布时间】：2018-02-17 21:35:41
【问题描述】：

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

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

请参阅下面的示例或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>

【问题讨论】：

标签： jquery image-scaling custom-scrolling

【解决方案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>

【讨论】：