Question

我创建了一个div，其中包含一个父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而不是溢出

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选项中将第一个div的id添加为parent

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

See Example in JS Fiddle

希望这就是你要找的东西

Answer 2

我在fixed中将absolute的每个实例更改为jquery.imgareaselect.min.js，然后它在position:relative的{{1}} div中完美运行。

在溢出div中滚动选择区域

2 个答案: