苹果手机微信浏览器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 浏览器返回按钮/手机返回按钮事件监听