스크롤 막대의 스크롤 위치를 결정하는 자바스크립트 예제 코드에 대한 자세한 설명
- 伊谢尔伦원래의
- 2017-07-19 16:06:161085검색
많은 웹사이트에서 상단으로 돌아가는 효과를 자주 볼 수 있습니다. 스크롤 막대가 지정된 위치에 도달하면 상단으로 돌아가는 효과가 나타납니다. 그렇지 않으면 자동으로 숨겨집니다. 이 효과를 깨닫는 것입니다.
가시 영역이 페이지의 실제 높이보다 작을 경우 스크롤 막대가 나타난 것으로 판단합니다. 즉,
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.