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