當輸入集中在使用 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。