JavaScript

移动端浏览器 body overflow: hidden; 失效解决方案

在移动设备中 body 设置了 overflow: hidden; 还是可以触摸滚动   , 在电脑调试时可以滚动  但手机上却没法正常使用  具体原因 本人还没有仔细研究过  

解决方案  (依赖Jquery )

先将body的滚动位置记录

var scrollTop = $("body").scrollTop();
		$("body").css({
		    'overflow':'hidden',
		    'position': 'fixed',
		    'top': scrollTop*-1
		});

将body 设置position 为fixed 作为浮动   

当恢复时

var sc = $("body").css('top');
			$("body").css({
			    'overflow':'auto',
			    'position': 'static',
			    'top': 'auto'
			});

			$("body").scrollTop(Math.abs(parseInt(sc)));

获取body的top 再将之前的css恢复auto 

随后将body滚动到 sc的位置

0 条评论

发表评论

你需要登录后才可进行发表