苹果手机微信浏览器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');
                }

 

 
 
更多:
posted @ 2019-06-03 14:35  天马3798  阅读(352)  评论(0编辑  收藏  举报