[英]IE8 alternative to window.scrollY?
我正在尝试使用window.scrollY
确定我滚动了多少像素。 但IE8不支持此功能。 什么是安全的跨浏览器替代方案?
如果您不必经常使用它,请执行以下操作:
var scroll = window.scrollY //Modern Way (Chrome, Firefox)
|| document.documentElement.scrollTop (Old IE, 6,7,8)
如果您正在使用jQuery,我使用$(window).scrollTop()来获取IE 8中的Y位置。它似乎有效。
如果您有充分的理由不仅使用库来处理这种基本功能,请不要犹豫“不要重新发明轮子”。
Mootools是开源的 ,你可以“偷”它的实现,相关的片段:
getScroll: function(){
var win = this.getWindow(), doc = getCompatElement(this);
return {x: win.pageXOffset || doc.scrollLeft, y: win.pageYOffset || doc.scrollTop};
}
function getCompatElement(element){
var doc = element.getDocument();
return (!doc.compatMode || doc.compatMode == 'CSS1Compat') ? doc.html : doc.body;
}
这两个是决定你当前浏览器具有哪种兼容模式的核心,然后是否使用window.pageYOffset
或document.body.scrollTop
基于它,甚至是document.html.scrollTop
用于真正古老的buggy浏览器。
根据Niels的回答,当需要Y坐标时,我想出了一个稍微紧凑的解决方案:
function get_scroll_y() {
return window.pageYOffset || document.body.scrollTop || document.html.scrollTop;
}
基于Mozilla,以及上面的答案,我创建了下面的函数,以便更容易获得coords:
var windowEl = (function () {
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
function scroll() {
return { left: scrollLeft, top: scrollTop };
};
function scrollLeft() {
return window.scrollX || window.pageXOffset || (isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft);
};
function scrollTop() {
return window.scrollY || window.pageYOffset || (isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop);
};
return {
scroll: scroll,
scrollLeft: scrollLeft,
scrollTop: scrollTop
}
})();
根据Mozilla的文档 ,如上面引述的寿命,所述的pageXOffset
属性是一个别名scrollX
属性,所以stictly来说不是必要的。
Anyhoo,用法是:
var scroll = windowEl.scroll();
// use scroll.left for the left scroll offset
// use scroll.top for the top scroll offset
var scrollLeft = windowEl.scrollLeft();
// the left scroll offset
var scrollTop = windowEl.scrollTop();
// the top scroll offset
测试并适用于Chrome,Firefox,Opera,Edge(8-Edge),IE(7-11),XP上的IE8
在角度,我们使用:
var windowEl = angular.element($window);
scrolldist = windowEl.scrollTop();
window.scrollY&window.scrollX适用于所有现代浏览器(Chrome,FireFox和Safari),但在IE中不起作用,以便修复使用window.pageXOffset或window.pageYOffset。
下面是我编写的用于修复问题的示例代码,以便程序化滚动适用于包括IE在内的所有浏览器
if((window.scrollY || window.pageYOffset) >= 1100){
//alert('Switch to land');
$('#landTrst').trigger('click'); // your action goes here
}else if ((window.scrollY || window.pageYOffset) <= 900) {
//alert('Switch to Refernce Letter');
$('#resLet').trigger('click'); // your action goes here
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.