window.pageYOffset已废弃,其替代方案是什么?
window.pageYOffset 的替代方案
window.pageYOffset 虽未完全废弃,但当前更推荐使用标准替代属性 window.scrollY,二者功能完全一致,均用于返回文档垂直方向已滚动的像素值,且主流现代浏览器都原生支持。
如果需要兼容极老旧浏览器(如IE9及更早版本),可以使用兼容性兜底写法:document.documentElement.scrollTop || document.body.scrollTop,不过日常开发中用scrollY已足够覆盖绝大多数场景。
修改后的代码示例
var prevScrollpos = window.scrollY; window.onscroll = function() { var currentScrollPos = window.scrollY; if (prevScrollpos > currentScrollPos) { document.getElementById("navbar").style.top = "0"; } else { document.getElementById("navbar").style.top = "-50px"; } prevScrollpos = currentScrollPos; }
极致兼容版本(针对老旧浏览器)
function getScrollY() { return window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0; } var prevScrollpos = getScrollY(); window.onscroll = function() { var currentScrollPos = getScrollY(); if (prevScrollpos > currentScrollPos) { document.getElementById("navbar").style.top = "0"; } else { document.getElementById("navbar").style.top = "-50px"; } prevScrollpos = currentScrollPos; }
内容的提问来源于stack exchange,提问作者Cronos254
相关产品推荐
相关产品推荐

