jQueryカスタムコンテンツスクロールの画像スケーリングのバグを回避する

Question

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>

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>