当输入集中在使用 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。