如何禁用/防止自动滚动时，输入集中在移动设备使用颜色框弹出?

Question

我有一个响应式网站，使用colorbox打开一个联系人表单弹出。在桌面浏览器上一切正常，移动设备上的问题是:

1. 当我滑动/向下滚动一点时，弹出框弹出框会滚动回到顶部。当我滑动/滚动更大的量，没有滚动回发生。
2. (更重要的是)当我第一次聚焦/触摸其中一个输入字段时，键盘出现，弹出窗口滚动到弹出窗口的顶部，因此输入字段在视线之外。在此之后，当我聚焦/触摸任何其他输入字段时，不会发生滚动。

这是colorbox产生的(简化的)代码:

<div id="cboxOverlay" style="opacity: 0.9; cursor: pointer; visibility: visible;"></div>
<div id="colorbox" class="" role="dialog" tabindex="-1" style="display: block; visibility: visible; top: 0px; left: 0px; position: absolute; width: 555px; height: 2453px;">
<div id="cboxWrapper" style="height: 2453px; width: 555px;">
<div style="clear: left;">
<div id="cboxContent" style="float: left; width: 1427px; height: 1818px;">
<div id="cboxLoadedContent" style="width: 1427px; overflow: auto; height: 1818.08px;">
<div class="quickform">
<form name="form_1071" id="form_1071" method="post" action="https://domain.tld/formu.php" autocomplete="on">
<input type="hidden" name="header" value="Contact">
<input type="hidden" name="timestamp" value="1667904741" data-label="Timestamp">
<input type="hidden" name="contactid" value="">
<input type="hidden" name="quickform" value="1071">
<input type="hidden" name="index" value="0">
<label for="vorname">Name*:
<input required="" class=" inputfield" type="text" id="vorname" name="qf_r_name" value="">
</label>
<label for="email">eMail*:
<input required="" class=" inputfield" type="text" id="email" name="qf_r_email" value="">
</label>
<label for="message">Message*:
<textarea required="" class="  inputfield" cols="80" rows="6" id="message" name="qf_r_message"></textarea>
</label>
<button name="Submit" type="submit">SEND</button>
</form>
</div>
</div>
</div>
</div>
</div>

请让我知道如果我应该提供任何其他代码，我不知道从哪里开始…

Answer 1

经过几个小时的研究和测试，我自己发现:在jquery.colorbox . min.js中修改

reposition:!0 to reposition:!1

如果窗口的调整大小事件被触发，防止颜色框的重新定位。