我有以下基本布局:
<div class="Container">
<div class="Content"></div>
<div class="Selector"></div>
</div>
我们的想法是选择器div正在标记内容中的某个区域,并且该区域可以调整大小:
div.Container
{
border: 2px solid #00F;
width: 240px;
height: 300px;
overflow: auto;
position: relative;
}
div.Selector
{
position: absolute;
top: 0px !important;
left: 80px;
width: 50px;
height: 500px;
border-left: 2px solid #F00;
border-right: 2px solid #0F0;
z-index: 10000;
}
div.Content
{
height: 500px;
border: 1px solid #DEDEDE;
background-color: #EFEFEF;
}
可调整大小的选择器:
$(document).ready(function() {
$("div.Selector").resizable();
});
这个问题可以在这里看到 - http://jsfiddle.net/sXqbV/2/ - 当容器水平滚动时会发生。
调整div的大小后(稍微拖动右边缘),其左侧位置会减小(相对于滚动位置):
我在垂直滚动方面遇到了类似的问题,但我通过将!important
添加到顶部样式来解决它。我不能用左边的位置来做,因为我可能还需要它从左边可以调整大小。
如何解决此问题?
答案 0 :(得分:4)
我从未使用过resizable,我只是浏览了它的代码并找到了它。 (所以不要问我为什么)
$(document).ready(function() {
$("div.Selector").resizable({containment: $('div.Container')});
});
请参阅fiddle