我有一个容器,里面有一个列表。可以拖动列表项,用鼠标移动。
容器可滚动:
overflow-y: scroll;
通过设置此属性,Chrome 会自动将 overflow-x
属性设置为“auto”。如果我设置 overflow-x: visible
它会被 Chrome 忽略。如果我设置 overflow-x: hidden
那么显然该元素被裁剪了。
当我将列表项拖到容器的左边缘或上边缘之外时,它会被裁剪到容器的边缘。如果我将它拖出右侧或底部边缘,容器会滚动以容纳它。我希望该元素能够在不被裁剪且不触发滚动的情况下拖出容器。
鉴于必须将容器设置为 overflow-y: scroll
并且这反过来会强制 Chrome 设置 overflow-x: auto
,我有什么办法吗?可以实现还是不可能?
代码笔:http://codepen.io/Pedr/pen/azLWeY
注意:我知道我可以通过使用填充来抵消容器来解决这个问题(这样容器的限制实际上超出了它的视觉边缘),但在我的情况下这不是一个选项.
$(function() {
$('.Wrapper').mousemove(function(event){
$('.Item').offset({left: event.pageX, top: event.pageY});
});
})
html,
body {
height: 100%;
}
.Wrapper {
width: 100%;
height: 100%;
position: absolute;
}
.Container {
background: grey;
position: absolute;
width: 50%;
left: 25%;
min-height: 100%;
overflow-y: scroll;
overflow-x: hidden; // Clips Item
// If left at auto it will clip the item on the top and left edge and scroll if the item overlaps the bottom or right edge.
}
.Item {
padding: 20px;
background: red;
position: absolute;
width: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrapper">
<div class="Container">
<div class="Item">ITEM</div>
</div>
</div>
最佳答案
将 ITEM 设置为固定位置....使其远离其他所有内容
It Works like this
$(function() {
$('.Wrapper').mousemove(function(event){
$('.Item').css('position', 'fixed');
$('.Item').offset({left: event.pageX, top: event.pageY});
});
})
Look on the snippet here:
$(function() {
$('.Wrapper').mousemove(function(event){
$('.Item').css('position', 'fixed');
$('.Item').offset({left: event.pageX, top: event.pageY});
});
})
.Wrapper {
width: 100%;
height: 100%;
position: absolute;
}
.Container {
background: grey;
position: absolute;
width: 50%;
left: 25%;
min-height: 100%;
overflow-y: scroll;
overflow-x: hidden; // Clips Item
// If left at auto it will clip the item on the top and left edge and scroll if the item overlaps the bottom or right edge.
}
.Item {
padding: 20px;
background: red;
position: absolute;
width: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrapper">
<div class="Container">
<div class="Item">ITEM</div>
</div>
</div>
关于html - 使用 Overflow-y :scroll 将 child 拖出容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28286725/