javascript - 在父元素上切换溢出属性时

Question

The example Fiddle here .

具有 height:auto 的容器包含具有 width:100% 的元素。单击按钮时，列表更改为 height:400px 和 overlow-y:scroll。再次单击时，元素不再具有 width:100%。它们保持宽度，因为滚动条仍然可见。

是否有解决此问题的 css 方式？我想避免 jquery-hack。

这是我在 Windows、Chrome 52 上看到的:

页面加载后:

第一次点击 Toggle 后:

第二次点击 Toggle 后:

非常感谢!

?!? jsfiddle.net 的链接必须附有代码。好的..？!？

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

Answer 1

这似乎是 Google Chrome 中的错误。添加滚动条时，子元素会失去其初始宽度，但在检查元素时计算出的宽度没有变化。

作为 CSS hack，您可以在容器中隐藏 X-overflow，以防止添加滚动条时子项调整大小。

请注意，如果元素的内容太长并溢出容器，这个技巧实际上可能会失败。

$("#toggle-scroll").on("click touchstart", function(){
	$("#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>