Jquery UI Draggable iframe滚动问题不起作用

Posted 2023-05-09

【中文标题】Jquery UI Draggable iframe滚动问题不起作用

【英文标题】：Jquery UI Draggable iframe scroll issue does not work

【发布时间】：2017-09-16 10:12:54

【问题描述】：

如果您设置 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);"  scrolling="no" border="0" >
    </iframe>
</div>

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

我需要帮助！

【参考方案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);"  scrolling="yes" border="0" >
    </iframe>
</div>

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

【讨论】：

谢谢，我认为这可以通过简单地隐藏滚动条来工作。 :)

很高兴它有帮助:)