3

私は次の基本的なレイアウトを持っています：

<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、トップスタイルに追加することで解決しました。左からのサイズ変更も必要になるので、左の位置ではできません。

この問題を解決するにはどうすればよいですか？

4

1 に答える 1

4

サイズ変更可能なものを使用したことはありません。コードを参照して見つけました。（だから私に理由を聞かないでください）

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

フィドルを見る

于 2012-02-04T18:51:49.183 に答える