Node.js는 스크롤 막대가 page_javascript 기술의 하단 또는 상단에 도달했는지 확인합니다.

이 기사의 예에서는 스크롤 막대가 페이지 하단에 도달했는지 상단에 도달했는지 확인하는 js 메서드를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

많은 웹사이트에서 상단으로 돌아가는 효과를 자주 볼 수 있습니다. 스크롤 막대가 지정된 위치에 도달하면 상단으로 돌아가는 현상이 나타납니다. 그렇지 않으면 자동으로 숨겨집니다. 여기서는 원리와 방법을 소개합니다. 이 효과를 실현하는 것입니다.

가시 영역이 페이지의 실제 높이보다 작은 경우 스크롤 막대가 나타나는 것으로 판단합니다.

코드 복사 코드는 다음과 같습니다.

if (document.documentElement.clientHeight < document.documentElement.offsetHeight) 스크롤 = true ;

document.documentElement 를 사용하려면 페이지 헤드에 선언을 추가해야 합니다.

코드 복사 코드는 다음과 같습니다.

실제로 이 코드는 브라우저의 테두리라는 한 가지 문제를 고려하지 않기 때문에 작동하지 않습니다. 페이지의 offsetHeight를 얻을 때 브라우저의 테두리는 2픽셀이므로 clientHeight는 항상 포함됩니다. 어떤 상황에서도 offsetHeight보다 작으므로 스크롤 막대가 없어도 true가 되므로 이 오류를 수정해야 합니다. 코드는 다음과 같이 변경되어야 합니다. offsetHeight에서 4픽셀을 빼야 합니다. 즉,

코드 복사 코드는 다음과 같습니다.

if (document.documentElement.clientHeight < document.documentElement.offsetHeight- 4){
//관련 스크립트를 실행합니다.
}

또한 여기서는 위의 코드가 가로 스크롤 막대를 판단하는 것임을 이해해야 합니다. 일반적으로 판단해야 할 것은 세로 스크롤입니다.

코드 복사 코드는 다음과 같습니다.

if (document.documentElement.clientWidth < document.documentElement.offsetWidth- 4){
//관련 스크립트를 실행합니다.
}

스크롤 막대가 페이지 하단으로 당겨졌는지 확인하려면 다음 코드를 사용하세요

코드 복사 코드는 다음과 같습니다.

window.onscroll = function(){
var marginBot = 0;
if (document.documentElement.scrollTop){
marginBot = document.documentElement.scrollHeight – (document.documentElement.scrollTop document.body.scrollTop)-document.documentElement.clientHeight;
} 그 밖의 {
marginBot = document.body.scrollHeight – document.body.scrollTop- document.body.clientHeight;
}
if(marginBot<=0) {
//뭔가를 해라
}
}

예시 2

온라인에서 찾았습니다. 브라우저와 매우 호환됩니다. 이상한 점은 문서에서 관련 정보를 찾을 수 없다는 것입니다. 코드를 게시하세요.

코드 복사 코드는 다음과 같습니다.

/********************
* 창 스크롤 막대의 높이를 가져옵니다
******************/
함수 getScrollTop()
{
    var scrollTop=0;
    if(document.documentElement&&document.documentElement.scrollTop)
    {
        scrollTop=document.documentElement.scrollTop;
    }
    else if(document.body)
    {
        scrollTop=document.body.scrollTop;
    }
    스크롤탑 반환;
}

/********************
* 창의 가시 범위 높이를 가져옵니다
*******************/
함수 getClientHeight()
{
    var 클라이언트 높이=0;
    if(document.body.clientHeight&&document.documentElement.clientHeight)
    {
        var clientHeight = (document.body.clientHeight     }
    그 외
    {
        var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;   
    }
    클라이언트 높이 반환;
}
/********************
* 문서 내용의 실제 높이를 가져옵니다
*******************/
함수 getScrollHeight()
{
    return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
  함수 테스트(){
 if (getScrollTop() getClientHeight()==getScrollHeight()){
  Alert("到达底부");
 }그밖에{
  Alert("没有到达底part");
 }
}

보충 자료:

DTD 선언:

IE
document.documentElement.scrollHeight 브라우저에 있는 모든 콘텐츠의 높이 document.body.scrollHeight 브라우저에 있는 모든 콘텐츠의 높이
document.documentElement.scrollTop 브라우저의 스크롤 부분 높이 document.body.scrollTop은 항상 0입니다
document.documentElement.clientHeight 브라우저에 보이는 부분의 높이 document.body.clientHeight 브라우저에 있는 모든 콘텐츠의 높이

FF
document.documentElement.scrollHeight 브라우저에 있는 모든 콘텐츠의 높이 document.body.scrollHeight 브라우저에 있는 모든 콘텐츠의 높이
document.documentElement.scrollTop 브라우저의 스크롤 부분 높이 document.body.scrollTop은 항상 0입니다
document.documentElement.clientHeight는 브라우저에 표시되는 부분의 높이이고, document.body.clientHeight는 브라우저에 있는 모든 콘텐츠의 높이입니다.

크롬
document.documentElement.scrollHeight는 브라우저에 있는 모든 콘텐츠의 높이이고, document.body.scrollHeight는 브라우저에 있는 모든 콘텐츠의 높이입니다
document.documentElement.scrollTop은 항상 0, document.body.scrollTop은 브라우저 스크롤 부분의 높이
document.documentElement.clientHeight 브라우저에 보이는 부분의 높이 document.body.clientHeight 브라우저에 있는 모든 콘텐츠의 높이

DTD가 선언되지 않음:

IE
document.documentElement.scrollHeight는 브라우저에 표시되는 부분의 높이이고, document.body.scrollHeight는 브라우저에 있는 모든 콘텐츠의 높이입니다
document.documentElement.scrollTop은 항상 0, document.body.scrollTop은 브라우저 스크롤 부분의 높이
document.documentElement.clientHeight는 항상 0이고 document.body.clientHeight는 브라우저에서 보이는 부분의 높이입니다

FF
document.documentElement.scrollHeight는 브라우저에 표시되는 부분의 높이이고, document.body.scrollHeight는 브라우저에 있는 모든 콘텐츠의 높이입니다
document.documentElement.scrollTop은 항상 0이고 document.body.scrollTop은 브라우저 스크롤 부분의 높이입니다.
document.documentElement.clientHeight는 브라우저에 있는 모든 콘텐츠의 높이이고, document.body.clientHeight는 브라우저에서 보이는 부분의 높이입니다

크롬
document.documentElement.scrollHeight는 브라우저에 표시되는 부분의 높이이고, document.body.scrollHeight는 브라우저에 있는 모든 콘텐츠의 높이입니다
document.documentElement.scrollTop은 항상 0이고 document.body.scrollTop은 브라우저 스크롤 부분의 높이입니다.
document.documentElement.clientHeight는 브라우저에 있는 모든 콘텐츠의 높이이고, document.body.clientHeight는 브라우저에서 보이는 부분의 높이입니다

브라우저 내 모든 콘텐츠의 높이는 스크롤바가 펼쳐진 부분과 보이는 부분, 하단에 숨겨진 부분의 높이를 합한 것을 포함한 브라우저 전체 프레임의 높이입니다.

브라우저에서 스크롤되는 부분의 높이는 스크롤 막대의 높이이며, 이는 전체 개체의 상단에서 시각적 상단의 높이입니다.
위의 매개변수를 이해한 후에는 IE, FF 및 Chrome 브라우저와 호환되는 스크롤 효과를 만들 수 있습니다.

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.