iOS Chrome/Safari - 在模態內聚焦輸入時不需要的滾動

Question

在 Safari 和 Chrome 中測試 - 結果相同，所以我認為這是 iOS 問題。

僅當模態內有輸入並且我點擊該輸入時才會發生這種情況。 在同一時刻，該輸入獲得焦點並且本機 iOS 鍵盤變得可見。

模態下方的頁面在同一時刻自動滾動到其高度的 50%。 這種行為是完全不需要的，我不知道如何阻止這個默認的 iOS“功能”。

演示：

---

更新：修復提交： limonte/sweetalert2/commit/4a2d36b

Answer 1

我們在工作中遇到了類似的問題，我在你的（優秀的）演示頁面上偶然發現了這個問題。

正如您所提到的，偏移量始終是頁面高度的 50%，無論您的初始偏移量在哪里，都會發生這種情況。

過去，當我在早期的 iO​​S 版本中觀察到類似的“跳躍”（盡管跳躍不那么劇烈）時，我通常通過將position: fixed (or relative ) 應用到body來解決這個問題（ 這允許overflow: hidden to正常工作）。

但是，如果用戶向下滾動，這會導致用戶跳回頁面頂部的無人值守后果。

所以，如果你願意用一些JavaScript解決這個問題，這里有一個修復/黑客我已經拋出：

// Tapping into swal events
onOpen: function () {
  var offset = document.body.scrollTop;
  document.body.style.top = (offset * -1) + 'px';
  document.body.classList.add('modal--opened');
},
onClose: function () {
  var offset = parseInt(document.body.style.top, 10);
  document.body.classList.remove('modal--opened');
  document.body.scrollTop = (offset * -1);
}

以及 CSS 的樣子：

.modal--opened {
  position: fixed;
  left: 0;
  right: 0;
}

這是您的演示頁面的一個分支，以說明： https : //jpattishall.github.io/sweetalert2/ios-bug.html

對於那些正在尋找更通用修復的人，您可以在打開/關閉模態時執行以下操作：

function toggleModal() {
    var offset;
    if (document.body.classList.contains('modal--opened')) {
        offset = parseInt(document.body.style.top, 10);
        document.body.classList.remove('modal--opened');
        document.body.scrollTop = (offset * -1);
    } else {
        offset = document.body.scrollTop;
        document.body.style.top = (offset * -1) + 'px';
        document.body.classList.add('modal--opened');
    }
}

編輯：需要注意的一件事是我們沒有盲目地將修復程序應用於所有設備/平台，只是 iOS Safari。 我在你的另一個問題中注意到你不喜歡溢出：由於滾動條出現/消失時頁面的移動而隱藏（我完全同意）。 我建議只將 JS 應用於 iOS 設備。

Answer 2

在 iOS 上，我遇到了由 setTimeout 和 setInterval 引起的滾動事件（定位模態導致滾動？）。 我在某處找到了以下代碼的解決方案。

Function.prototype.bind = function(parent) {
  var f = this;
  var args = [];

  for (var a = 1; a < arguments.length; a++) {
    args[args.length] = arguments[a];
  }

  var temp = function() {
    return f.apply(parent, args);
  }

  return(temp);
}


setTimeout(function() {
  // your animation stuff here
}.bind(this), 100);

Answer 3

我在這里能想到的一件事是可能將Fast Click庫添加到您的代碼中。 一些 iOS 和 Android 超時問題（例如300ms延遲）由 Fast Click 處理。 值得一試

Answer 4

其他需要檢查的是輸入字段的字體大小是否高於將觸發輸入縮放的最小值。 我在這里憑記憶工作，但我遇到了類似的問題。 將輸入字體大小設置為 16px（再次來自內存）或更大可防止 iOS Safari 嘗試縮放輸入字段，從而干擾頁面滾動。

Answer 5

解決！！！！！ 請將這些代碼添加到您的腳本中

 //reach out to that input field (When ever ur gonna click tofocus) let inputField = document.getElementById("input_focused") /* * Method 1: Briefly change the opacity. * Element might "blink" on focus in some scenarios. */ inputField.addEventListener("focus", () => { methodOne.style.opacity = 0; setTimeout(() => methodOne.style.opacity = 1); });

 <section id="modal"> <input id="input_focused"> </section>