具有 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;
}
最佳答案
这似乎是 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>
关于javascript - 在父元素上切换溢出属性时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38553432/