親要素のオーバーフロープロパティをトグルするとき

Question

The example Fiddle here。

height:autoのコンテナには、width:100%のアイテムが含まれています。ボタンをクリックすると、リストはheight:400pxとoverlow-y:scrollに変わります。もう一度クリックすると、アイテムはもはやwidth:100%になりません。スクロールバーがまだ表示されているので、幅のままです。

これを修正するCSSの方法はありますか？私はjquery-hackを避けたいと思います。

後：トグルの最初のクリック後

：

ページのロード後：

これ

は、私がWindows上で見るものクローム52ですトグルをもう一度クリック：

ありがとうございました！

？！？ jsfiddle.netへのリンクにはコードが必要です。 Okaaayy ..？！？

.scroll{ 
    height:400px; 
    overflow-y:scroll; 
} 

Answer 1

これはGoogle Chromeのバグのようです。スクロールバーが追加されたときのchildren要素の初期幅は緩いですが、要素の検査時には計算された幅に変化はありません。

CSSハックとして、スクロールバーが追加されたときに子供のサイズ変更を防ぐために、コンテナ内のXオーバーフローを非表示にすることができます。

アイテムの内容が長すぎて容器がオーバーフローすると、このトリックが実際には失敗する場合があることに注意してください。

$("#toggle-scroll").on("click touchstart", function(){ 
 
\t $("#list").toggleClass("scroll"); 
 
});

#list{ 
 
    background-color:#808000; 
 
    width:300px; 
 
    overflow-x:hidden; 
 
} 
 
.item{ 
 
    background-color:#555;color:#efefef; 
 
    padding:4px;margin:1px; 
 
} 
 
.scroll{ 
 
    height:400px; 
 
    overflow-y:scroll; 
 
} 
 
.btn{ 
 
    display:inline-block 
 
    padding:15px; 
 
    margin:15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="toggle-scroll" class="btn">Toggle Scrollbar</button> 
 

 
<div id="list"> 
 

 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 

 
</div>