developer tip

$ (document) .scrollTop ()은 항상 0을 반환합니다.

copycodes 2020. 11. 13. 23:42
반응형

$ (document) .scrollTop ()은 항상 0을 반환합니다.


페이지의 스크롤 위치가 특정 높이에 도달하면 단순히 무언가를 시도하고 있습니다. 그러나 scrollTop()0을 반환하거나 null얼마나 아래로 스크롤해도 상관 없습니다. 이것은 scrollTop()을 확인하는 데 사용하는 도움말 기능입니다 .

$('body').click(function(){
    var scrollPost = $(document).scrollTop();
    alert(scrollPost);
});

나는 부착 해봤 scrollTop()$('body'), $('html')물론 $(window),하지만 아무것도 변경됩니다.

어떤 아이디어?


어떤 이유로 내 html 및 body 태그에서 'height : 100 %'를 제거하면이 문제가 해결되었습니다.

다른 사람에게 도움이되기를 바랍니다.


스크롤 = 0과 동일한 문제가 있습니다.

document.body.scrollTop

다음 번 사용

document.scrollingElement.scrollTop

01.06.2018 수정

사용하는 경우 또는에 요소 event가있는 개체가 있습니다 . 다음은 여러 브라우저에서 스크롤 작업을 보여주는 표입니다.documenttargetsrcElement예

여기에 이미지 설명 입력

보시다시피 Firefox와 IE에는없고 srcElementIE 11은 scrollingElement.


위의 일부를 시도하고 CSS를 변경하지 않는 내 솔루션 :

var scroll_top = Math.max( $("html").scrollTop(), $("body").scrollTop() )

이것은 Chrome, Firefox, IE 및 Edge의 최신 버전에서 작동합니다.


저와 똑같은 실수를 할 수있는 사람들을위한 부가 기능이 있습니다. 내 코드는 다음과 같습니다.

var p = $('html,body');
$( ".info" ).text( "scrollTop:" + p.scrollTop() );

이 코드는 <html>태그의 scrollTop 값이 항상 0 또는 null 이기 때문에 chrome 및 safari와 같은 웹킷 브라우저를 제외한 모든 브라우저에서 작동합니다 .

다른 브라우저는이를 무시하지만 웹킷의 브라우저는 무시합니다.

가장 간단한 해결책은 코드와 Voila에서 html 태그를 제거하는 것입니다.

var p = $('body');
$( ".info" ).text( "scrollTop:" + p.scrollTop() );

height: 100%;html 및 body 태그에서 제거 하면 문제를 해결할 수 있습니다.

그 이유는 html 및 body 요소의 height 속성 값으로 100 %를 설정했을 수 있기 때문입니다. html 및 body 요소의 height 속성을 100 %로 설정하면 문서 높이와 같은 높이가됩니다.


같은 문제가있었습니다. scrollTop ()은 문서 나 본문이 아닌 일부 블록에서 작동합니다. 이 방법을 사용하려면 블록에 높이와 오버플로 스타일을 추가해야합니다.

#scrollParag {
    height: 500px;
    overflow-y: auto;
}

그리고:

var scrolParag = document.getElementById('scrollParag');
 alert(scrolParag.scrollTop); // works!

Scroll Top도 항상 0을 반환했습니다. 나는 페이지의 특정 요소에 초점을 맞추기 위해 사용했습니다. 이를 위해 다른 접근 방식을 사용했습니다.

document.getElementById ( "elementID"). scrollIntoView ();

모바일, 태블릿 및 데스크톱에서 잘 작동합니다.


그건 그렇고, 당신이 사용해야 할 것 같습니다

$("body").scrollTop()

대신에

$(".some-class").scrollTop

이것이 내가 갇힌 이유입니다.

참고 URL : https://stackoverflow.com/questions/12788487/document-scrolltop-always-returns-0

반응형