jQuery可调整大小的问题（带滚动的相对div中的绝对div）

Question

我有以下基本布局：

<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添加到顶部样式来解决它。我不能用左边的位置来做，因为我可能还需要它从左边可以调整大小。

如何解决此问题？

Answer 1

我从未使用过resizable，我只是浏览了它的代码并找到了它。 （所以不要问我为什么）

$(document).ready(function() {
    $("div.Selector").resizable({containment: $('div.Container')}); 
});

请参阅fiddle