移動端滾動穿透解決方案

/解決移動端滾動穿透樣式
body.modal { 
position: fixed; 
width: 100%; 
}

//scrollingElement兼容性代碼 
(function () { 
if (document.scrollingElement) { 
return 

var element = null 
function scrollingElement () { 
if (element) { 
return element 
} else if (document.body.scrollTop) { 
// speed up if scrollTop > 0 
return (element = document.body) 

var iframe = document.createElement(‘iframe’) 
iframe.style.height = ‘1px’ 
document.documentElement.appendChild(iframe) 
var doc = iframe.contentWindow.document 
doc.write(‘x‘) 

doc.close() 

var isCompliant = doc.documentElement.scrollHeight > doc.body.scrollHeight 
iframe.parentNode.removeChild(iframe) 
return (element = isCompliant ? document.documentElement : document.body) 

Object.defineProperty(document, ‘scrollingElement’, { 
get: scrollingElement 
}) 
})()

var Modal= (function(bodyClass) { 
var scrollTop; 
return { 
afterOpen: function() { 
scrollTop = document.scrollingElement.scrollTop; 
document.body.classList.add(bodyClass); 
document.body.style.top = -scrollTop + ‘px’; 
}, 
beforeClose: function() { 
document.body.classList.remove(bodyClass); 
document.getElementsByTagName(“body”)[0].removeAttribute(“style”); 
document.scrollingElement.scrollTop = scrollTop; 

}; 
})(‘modal’)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章