蘋果手機微信瀏覽器select標籤選擇完成以後頁面不會自動回到原位

 

說明：

html默認select選擇框控件在IOS的瀏覽器中 是底部彈出下拉選擇。

這樣到時頁面位置錯位，選擇結束後對應很多元素的點擊事件不響應。

 

這樣看起來問題不大，可是選擇完成以後點擊肯定提交彈出框的話  框內的按鈕就頗有可能不在頁面上了（由於頁面已經往上移了）  因此框上的按鈕就會失效。  解決方案：

點擊確認提交時讓頁面回到原位

js 點擊時：

window.scrollTo(0, document.body.scrollTop + 1);

document.body.scrollTop >= 1 && window.scrollTo(0, document.body.scrollTop - 1);

jquery下響應處理代碼：

                //處理IOS瀏覽器，彈出層定位問題
                if (navigator.userAgent.match(/iPhone/i) ||
                    navigator.userAgent.match(/iPod/i)) {
                    var height = 0;
                    $('body').on({
                        click: function () {
                            height = $(window).scrollTop();
                        },
                        blur: function () {
                            $(window).scrollTop(height);
                        }
                    }, '.modal input');
                }

 

 

 

更多：

HTML5 Selection對象

JS Range使用整理

HTML5 瀏覽器返回按鈕/手機返回按鈕事件監聽