問題1: 通過document.addEventListener("scroll",function(){})對頁面滾動監聽事件進行監聽,但ios下$(document).scrollTop()值始終為0,對頁面監聽無效。 原因: 因為iOS下iframe的高度會根據頁面的內容自適應,造成了ifra ...
問題1:
通過document.addEventListener("scroll",function(){})對頁面滾動監聽事件進行監聽,但ios下$(document).scrollTop()值始終為0,對頁面監聽無效。
原因:
因為iOS下iframe的高度會根據頁面的內容自適應,造成了iframe的高度過高(即iframe的高度>屏幕的高度)。則iframe內部html、body標簽即使設置為100%,它的值也是頁面所有內容撐開的高度。
解決方法:
將body設置為fixed,寬高設為100%,添加-webkit-overflow-scrolling: touch;在body下寫一個div,針對這個div進行scroll監聽操作。
html{ position: relative; width: 100%; height: 100%; overflow: hidden; } body{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }
問題2:ios中點擊,通過display=block或.show()顯示元素會跳轉頂部。
解決方法:將元素設置為visibility:hidden,通過改變值為"visible"顯示元素。
問題3:ios微信中,iframe下長按二維碼識別不了。
原因:iframe受微信的安全限制,阻止了預設事件,也可能是父子視窗的原因。
解決思路:看其他文章說可以在iframe中的二維碼被按下touchstart的時候,將二維碼地址推送至父頁面。父頁面接收到二維碼識別的請求,則創建一個不可見的img元素,src為剛剛傳輸過來的二維碼地址,並且二維碼置頂鋪滿整個屏幕。在touchend與touchcancel時,通知父窗體刪除二維碼。(具體沒有嘗試過)