移动端遮罩层出现后,底部的页面还是可以滚动的,用下面的方法可以禁止滚动,但是解除禁止后滚动条会回到顶部。如果想滚动条保持在遮罩层出现时的位置,可以根据实际开发配合scrollIntoView()来使用。
/** * 移动端禁止页面滚动 * * @returns {object} */ function stopScroll(){ var html=document.getElementsByTagName('html')[0]; var body=document.getElementsByTagName('body')[0]; var o={}; o.can=function(){ html.style.overflow="visible"; html.style.height="auto"; body.style.overflow="visible"; body.style.height="auto"; }, o.stop=function(){ html.style.overflow="hidden"; html.style.height="100%"; body.style.overflow="hidden"; body.style.height="100%"; } return o }
var scroll=stopScroll()
scroll.stop() //禁止页面滚动
scroll.can() //接触禁止