問題描述
iOS webview 中會有雙擊居中功能，自動將不在屏幕中心的文本拉到屏幕中心。但是這個時候彈出的元素會錯位。
我們使用 position: fixed; 對彈出元素進行定位，并且給予屏幕大小一樣對寬高。
1.png
上圖是正常情況。
然后我們滾動到某個位置，再次彈窗也不會有問題。
此時雙擊下面的某個元素，然后再點擊按鈕出彈窗。這是我們看到的背景色已經錯位了。
2.png
貼上這部分的代碼
var show = document.querySelector('.js-show');
show.addEventListener('click', function() {
var modal = document.createElement('div');
modal.classList.add('modal');
document.body.appendChild(modal);
modal.addEventListener('click', function() {
document.body.removeChild(modal);
});
});
.modal {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
}
解決方案
在彈窗前先對瀏覽器進行一次滾動。
在 js 中添加下面的代碼
window.scrollTo(window.scrollX, window.scrollY);
