当输入集中在使用 colorbox 弹出窗口的移动设备上时，如何禁用/防止自动滚动？

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

以防止在触发窗口的调整大小事件时重新定位 Colorbox。