스크롤 막대의 스크롤 위치를 결정하는 자바스크립트 예제 코드에 대한 자세한 설명-JS 튜토리얼-php.cn

스크롤 막대의 스크롤 위치를 결정하는 자바스크립트 예제 코드에 대한 자세한 설명

伊谢尔伦

풀어 주다： 2017-07-19 16:06:16

원래의

1122명이 탐색했습니다.

많은 웹사이트에서 상단으로 돌아가는 효과를 자주 볼 수 있습니다. 스크롤 막대가 지정된 위치에 도달하면 상단으로 돌아가는 효과가 나타납니다. 그렇지 않으면 자동으로 숨겨집니다. 이 효과를 깨닫는 것입니다.

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

if (document.documentElement.clientHeight < document.documentElement.offsetHeight) scroll = true;

로그인 후 복사

document.documentElement를 사용하려면 페이지 헤드에 명령문을 추가해야 합니다. :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

로그인 후 복사

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

if (document.documentElement.clientHeight < document.documentElement.offsetHeight-4){
//执行相关脚本。
}

로그인 후 복사

또한 명확하게 설명하겠습니다. 위의 코드는 가로 스크롤 막대를 판단하는 것입니다. 일반적으로 판단해야 하는 것은 세로 스크롤입니다.

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

if (document.documentElement.clientWidth < document.documentElement.offsetWidth-4){
//执行相关脚本。
}

로그인 후 복사

예제 2

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

window.onscroll = function (){
var marginBot = 0;
if (document.documentElement.scrollTop){
marginBot = document.documentElement.scrollHeight – (document.documentElement.scrollTop+document.body.scrollTop)-document.documentElement.clientHeight;
} else {
marginBot = document.body.scrollHeight – document.body.scrollTop- document.body.clientHeight;
}
if(marginBot<=0) {
//do something
}
}

로그인 후 복사

위 내용은 스크롤 막대의 스크롤 위치를 결정하는 자바스크립트 예제 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!