Jquery UI可拖动iframe滚动问题不起作用

Question

如果您设置iframe的高度，它不会向下滚动。我只想让它在向上或向下拖动元素时启用滚动。

$(".draggables .item-container .item").draggable({ 
 
    revert: "invalid", 
 
    containment: "#selection", 
 
    helper: "clone", 
 
    scroll: true, 
 
    iframeFix: true, 
 
    scrollSensitivity: 100, 
 
    scrollSpeed: 100 
 
}); 
 

 
$(".droppables .item-container .item").droppable({ 
 
    accept: ".draggables .item-container .item", 
 
    classes: { 
 
    "ui-droppable-active": "ui-state-active", 
 
    "ui-droppable-hover": "ui-state-hover" 
 
    }, 
 
    drop: function(event, ui) { 
 
    insertItem(this, ui.draggable); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<div style="height: 178px; border: 1px solid #000;"></div> 
 

 
<div id="container2"> 
 
    <iframe id="iframeBox" src="https://slm-promodesign.web.sd-svc.net/COA0036/coateschallenge?formForward=LOAD&t_mm=02&t_dd=27&t_hh=12&t_min=01" onload="resizeIframe(this);parent.scroll(0,0);" width="100%" scrolling="no" border="0" height="2000"> 
 
    </iframe> 
 
</div> 
 

 
<div style="height: 1024px; border: 1px solid #000;"></div>

我需要帮助的人！

Answer 1

首先你需要设置scrolling="yes"，然后用CSS技巧，你可以隐藏容器外的滚动条。

看到的结果是：

$(".draggables .item-container .item").draggable({ 
 
    revert: "invalid", 
 
    containment: "#selection", 
 
    helper: "clone", 
 
    scroll: true, 
 
    iframeFix: true, 
 
    scrollSensitivity: 100, 
 
    scrollSpeed: 100 
 
}); 
 

 
$(".droppables .item-container .item").droppable({ 
 
    accept: ".draggables .item-container .item", 
 
    classes: { 
 
    "ui-droppable-active": "ui-state-active", 
 
    "ui-droppable-hover": "ui-state-hover" 
 
    }, 
 
    drop: function(event, ui) { 
 
    insertItem(this, ui.draggable); 
 
    } 
 
});

#iframeBox { 
 
    position: relative; 
 
    right: -20px; 
 
    border: 0; 
 
} 
 

 
#container2{ 
 
    border:1px solid; 
 
    overflow:hidden; 
 
} 
 

 
#iframeBox html{ 
 
    margin-left:-20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<div style="height: 178px; border: 1px solid #000;"></div> 
 

 
<div id="container2"> 
 
    <iframe id="iframeBox" src="https://slm-promodesign.web.sd-svc.net/COA0036/coateschallenge?formForward=LOAD&t_mm=02&t_dd=27&t_hh=12&t_min=01" onload="resizeIframe(this);parent.scroll(0,0);" width="100%" scrolling="yes" border="0" height="400"> 
 
    </iframe> 
 
</div> 
 

 
<div style="height: 1024px; border: 1px solid #000;"></div>