jquery - 在溢出 div 中滚动选择区域

Question

我创建了一个 div，其中包含一个图像，其父 div 可滚动。But when selecting area for cropping it does not scroll the child 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 而不是溢出

Answer 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 中的示例

希望这就是你要找的

Answer 2

我将每个实例更改fixed为absolutein jquery.imgareaselect.min.js，然后它在position:relative具有overflow:auto.