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

Question

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

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

这是我在 Windows、Chrome 52:

上看到的

页面加载后：

第一次点击切换后：

第二次点击“切换”后：

非常感谢！

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

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

Answer 1

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

作为 CSS 技巧，您可以在容器中隐藏 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>

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

When toggeling overflow property on parent element

javascript

css

jquery

width

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

When toggeling overflow property on parent element

javascript

css

jquery

width

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