1

避免jQuery 自定义内容滚动器上的图像缩放错误的最佳做法是什么？

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

示例 gif

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

4

1 回答 1

2

包含滚动条 .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>

于 2017-09-21T21:48:22.860 回答