Próbuję określić, ile pikseli w dół przewijałem przy użyciu window.scrollY
. Ale nie jest to obsługiwane w IE8. Jaka jest bezpieczna alternatywa dla różnych przeglądarek?IE8 alternatywa dla window.scrollY?
Odpowiedz
Wersja kompatybilna z przeglądarką dla window.scrollY
to document.documentElement.scrollTop
. Informacje na temat pełnego, szczegółowego obejścia tego problemu w IE8 i wcześniej można znaleźć w sekcji "Uwagi" tego utworu Mozilla documentation.
As mentioned here, pageYOffset
to kolejna alternatywa dla window.scrollY (pamiętaj jednak, że jest to zgodne tylko z IE9 +).
W odniesieniu do linku powyżej, sprawdź Przykład 4 w pełni kompatybilnym sposób, aby uzyskać pozycję przewijania (nawet stanowi zoom jako @adeneo wymienić!) Używając document.documentElement.scrollTop
i document.documentElement.scrollLeft
.
'document.documentElement.scrollTop' daje 0 w Google Chrome 40 – McX
@McX Jest to spowodowane trwającym błędem Chrome, który nie został jeszcze rozwiązany (ale sądząc po odpowiedziach, które widziałem, są one w trakcie naprawy) - https://code.google.com/p/chromium/issues/detail?id=157855 – lifetimes
styczeń 2016 r., wciąż nieodłożone. – Hacktisch
Jeśli masz ważny powód nie tylko przy użyciu biblioteki do obsługi tego rodzaju funkcjonalności bazowego, nie wahaj się „aby nie wymyślać koła”.
Mootools is open source, a może po prostu „ukraść” jego wykonania, odpowiednie fragmenty:
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;
}
Te 2 są podstawą oceny, który tryb zgodności, Twoja przeglądarka musi, a następnie, czy użyć window.pageYOffset
lub document.body.scrollTop
w oparciu o to lub nawet document.html.scrollTop
dla naprawdę starożytnych przeglądarek buggy.
Jeśli używasz jQuery, użyłem $ (window) .scrollTop(), aby uzyskać pozycję Y w IE 8. Wydawało się, że działa.
podstawie odpowiedzi Niels', wymyślić nieco bardziej kompaktowe rozwiązanie, gdy potrzebne jest tylko coord Y:
function get_scroll_y() {
return window.pageYOffset || document.body.scrollTop || document.html.scrollTop;
}
Jeśli nie masz go używać dużo, po prostu zrobić:
var scroll =
window.scrollY //Modern Way (Chrome, Firefox)
|| window.pageYOffset (Modern IE, including IE11
|| document.documentElement.scrollTop (Old IE, 6,7,8)
to działa, chociaż nie sądzę, że potrzebujesz drugiego (window.pageYOffset). Chociaż działa, wszystkie starsze przeglądarki IE obsługują metodę "document.documentElement.scrollTop" uzyskiwania pozycji przewijania. Nowsze przeglądarki IE ("Edge") obsługują 'window.scrollY', jak wspomniano w MDN: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY?redirectlocale=en-US&redirectslug = DOM% 2Fwindow.scrollY – ps2goat
W kanciasty, używamy:
var windowEl = angular.element($window);
scrolldist = windowEl.scrollTop();
czyli [scrollbox jQuery] (https://docs.angularjs.org/api/ng/function/angular.element) mimo to ... –
podstawie Mozilla i odpowiedzi powyżej, mam stworzył bel funkcje ow łatwiej uzyskać 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
}
})();
Według Mozilla documentation, cytowany przez wcieleń powyżej, The nieruchomość pageXOffset
jest aliasem dla właściwości scrollX
, więc jest stictly mówiąc nie jest to konieczne.
Anyhoo, użycie jest:
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
Testowane & prace nad Chrome, Firefox, Opera, EDGE (8-Edge), czyli (7-11), IE8 na XP
window.scrollY & window.scrollX działa dobrze we wszystkich nowoczesnych przeglądarkach, takich jak (Chrome, FireFox & Safari), ale nie działa w IE, więc napraw okno window.pageXOffset lub window.pageYOffset.
Oto przykładowy kod pisałem naprawić czyli problem tak, że programowy przewijanie działa we wszystkich przeglądarkach, w tym 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
}
Użyj biblioteki takich jak Mootools i jQuery do obsługi abstrakcje przeglądarki dla Ciebie, jeśli w ogóle możliwe. –
Czy nie są wersje dla różnych przeglądarek do scrollX i scrollY, document.body.scrollLeft i document.body.scrollTop? – lifetimes
^^^^^ To jest [*** pageYOffset i document.body.scrollTop ***] (http://help.dottoro.com/ljnvjiow.php) – adeneo