0

親 div が scrollable になっている画像を含む div を作成しました。ただし、トリミングする領域を選択すると、子 div はスクロールされません。誰でもこれに対する解決策を提案できますか? *imageareaselect.min を使用

<div style=" width:500px; height:300px; overflow:auto;">
    <div  style=" width:1024px; height:600px ;" >
        <img  src="abc.jpg" style=" box-shadow:3px 0px 12px rgb(192, 192, 192);" id="thumbnail" alt="Create Thumbnail">
    </div>
</div>

これは、選択関数を呼び出すために使用されるjqueryです

$(function(){
    $('#thumbnail').imgAreaSelect({ aspectRatio: '1:0.8228571428571428', onSelectChange: preview }); 
});

選択領域は、オーバーフローではなく、div の外に出ます

4

2 に答える 2

1

position:absolute;最初の div に設定し、id

<div id="container" style="width:500px; height:300px; overflow:auto;position:absolute;">
    <div  style=" width:1024px; height:600px ;" >
        <img  src="abc.jpg" style=" box-shadow:3px 0px 12px rgb(192, 192, 192);" id="thumbnail" alt="Create Thumbnail">
    </div>
</div>

次に、imgAreaSelect オプションidで、最初の div をparent

$(function(){
    $('#thumbnail').imgAreaSelect({ aspectRatio: '1:0.8228571428571428', onSelectChange: preview, parent: '#container' }); 
});

JS Fiddle の例を参照してください

これがあなたが探していたものであることを願っています

于 2013-04-03T09:37:34.690 に答える
0

のすべてのインスタンスfixedをabsoluteinに変更したところ、を持つ divjquery.imgareaselect.min.js内で完全に機能しました。position:relativeoverflow:auto

于 2015-05-10T15:23:27.850 に答える