document.body.scrollTop Firefox에서 0 반환 : JS 만

document.body.scrollTop Firefox에서 0 반환 : JS 만

---

순수한 자바 스크립트의 대안이 있습니까?

다음은 오페라, 크롬 및 사파리에서 작동합니다. 탐색기에서 아직 테스트하지 않았습니다.

http://monkey-me.herokuapp.com

https://github.com/coolcatDev/monkey-me-heroku/blob/master/static/js/myscripts.js

페이지로드시 div '.content'까지 아래로 스크롤해야합니다.

var destiny = document.getElementsByClassName('content');
var destinyY = destiny[0].offsetTop;
scrollTo(document.body, destinyY, 200);

function scrollTo(element, to, duration) {
    if (duration <= 0) return;
    var difference = to - element.scrollTop;
    var perTick = difference / duration * 2;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        scrollTo(element, to, duration - 2);
    }, 10);
};

---

이것을 사용해보십시오 : document.documentElement.scrollTop. 내가 맞다면 document.body.scrollTop더 이상 사용되지 않습니다.

최신 정보

댓글에서 @Nikolai Mavrenkov가 제안한 것처럼 안전한 사용을 위해 Chrome이 대답과 함께 작동하지 않는 것 같습니다.

window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0

이제 모든 브라우저가 다루어 져야합니다.

---

IF 조건 을 사용하는 대신 이 논리식과 같은 것을 사용하여 적절한 결과를 얻는 더 쉬운 방법이 있습니다.

var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;

두 부분 모두 기본적으로 0을 반환하므로 스크롤이 0 위치에 있으면 예상대로 0이 반환됩니다.

bodyScrollTop = 0 || 0 = 0

페이지 스크롤에서 이러한 부분 중 하나는 0을 반환하고 다른 부분은 0보다 큰 숫자를 반환합니다. 0으로 된 값은 false로 평가되고 논리적 OR || 은 결과로 다른 값을 사용합니다 (예 : 예상되는 scrollTop 은 300 ).

Firefox와 유사한 브라우저는이 표현을 다음과 같이 볼 것입니다.

bodyScrollTop = 300 || 0 = 300

나머지 브라우저는

bodyScrollTop = 0 || 300 = 300

다시 동일하고 올바른 결과를 제공합니다.

사실, 그것은 모두에 관한 것입니다 something || nothing = something:)

---

표준은 document.documentElementFF와 IE에서 사용됩니다.

WebKit은 document.body표준으로 변경하면 이전 버전과의 호환성에 대한 불만으로 표준을 사용하고 사용할 수 없었습니다.이 게시물은 잘 설명합니다.

https://miketaylr.com/posts/2014/11/document-body-scrolltop.html

WebKit이 지원하는 문서에 새로운 속성이 있습니다.

https://developer.mozilla.org/en/docs/Web/API/document/scrollingElement

so this will get you to the right element

var scrollingElement = document.scrollingElement || document.documentElement;
scrollingElement.scrollTop = 100;

and there is a polyfill too

https://github.com/mathiasbynens/document.scrollingElement

참고URL : https://stackoverflow.com/questions/28633221/document-body-scrolltop-firefox-returns-0-only-js