一个垂直可滚动的列表中是否可能出现水平溢出的项目?
我在这里有一个CodePen示例:
http://codepen.io/baskuipers/pen/GqQYRJ
var $item = $('#1'),
$button = $('.button');
$button.on("click", function() {
$item.toggleClass('addMargin');
});
.sidenav {
width: 300px;
background-color: grey;
position: fixed;
padding: 20px;
}
.addMargin {
margin-left: 60px;
}
.item {
width: 100%;
overflow-y: auto;
height: 100vh;
z-index: 5;
position: relative;
}
.sub-item {
transition: margin-left 1s cubic-bezier(0.36, -0.48, 0, 2.22);
background-color: orange;
height: 100px;
width: 100%;
margin-bottom: 10px;
z-index: 10;
position: relative;
}
body {
box-sizing: border-box;
margin: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidenav">
<button class="button">test</button>
<div class="item">
<div id="1" class="sub-item"></div>
<div class="sub-item"></div>
<div class="sub-item"></div>
<div class="sub-item"></div>
<div class="sub-item"></div>
</div>
</div>
overflow-x:visible; overflow-y:auto;
)不起作用,并提供了一些解决方法。在这种情况下,只是通过评论附上问题链接会更好吗? - Sean LeBlanc