이 기사에서는 스크롤 막대가 페이지의 하단 또는 상단에 도달했는지 여부를 결정하기위한 JS 방법을 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.
우리는 종종 많은 웹 사이트가 최상위 효과로 돌아 오는 것을 본다. 막대를 지정된 위치로 스크롤 할 때 상단으로 돌아 오면 자동으로 숨겨져 있다는 것입니다. 이 효과를 구현하는 원칙과 방법을 소개하겠습니다.
가시 영역이 페이지의 실제 높이보다 작은 경우 스크롤 막대가 나타나는 것으로 결정됩니다.
코드 사본은 다음과 같습니다. if (document.documentElement.clientHeight <document.documentElement.offSetheight) scroll = true;
Document.DocumentElement를 사용하려면 페이지 헤드에 선언을 추가해야합니다.
코드를 다음과 같이 복사하십시오.
실제로이 코드는 문제, 즉 브라우저 테두리를 고려하지 않았기 때문에 작동하지 않습니다. 페이지의 오프 테일 높이를 얻으면 브라우저 테두리가 포함됩니다. 브라우저 테두리는 2 픽셀이므로 어쨌든 클라이언트는 항상 Offestheight보다 작으므로 스크롤 막대가 없어도 마찬가지입니다. 따라서이 오류를 수정해야합니다. 코드는 이와 같이 변경되어야하고 오프 테일에 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 clientHeight = 0;
if (document.body.clientheight && document.documentElement.clientHeight)
{
var clientHeight = (document.body.clientHeight <document.documentElement.clientHeight)? docb
}
또 다른
{
var clientHeight = (document.body.clientHeight> document.DocumentElement.ClientHeight)? hocess.body.clientHeight : document.documentElement.ClientHeight;
}
ClientHeight를 반환합니다.
}
/***************************
* 문서 컨텐츠의 실제 높이를 사용하십시오
*************************/
함수 getscrollHeight ()
{
return math.max (document.body.scrollheight, document.documentElement.scrollheight);
}
기능 test () {
if (getScrollTop ()+getClientHeight () == getScrollHeight ()) {
경고 ( "하단 도달");
}또 다른{
경고 ( "바닥에 도달하지 않음");
}
}
다시 채우다:
DTD는 다음과 같이 선언했습니다.
즉
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 :
즉
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 브라우저의 모든 컨텐츠의 높이, bodue.body.clientHeight 브라우저의 가시 부품의 높이
크롬
document.documentElement.scrollHeight 브라우저의 가시 부품의 높이 인 document.body.scrollheight 브라우저의 모든 컨텐츠의 높이
document.documentElement.scrolltop은 항상 0, document.body.scrolltop 브라우저 스크롤 부품 높이입니다
document.documentElement.clientHeight 브라우저의 모든 컨텐츠의 높이, bodue.body.clientHeight 브라우저의 가시 부품의 높이
브라우저의 모든 컨텐츠의 높이는 스크롤 막대 롤링 부품의 높이 + 시각 부품 + 하단의 숨겨진 부분의 합계를 포함하여 전체 브라우저 프레임 워크의 높이입니다.
브라우저 스크롤 부분의 높이는 스크롤 막대의 높이가 높이의 일부를 롤아웃하여 전체 물체의 상단의 높이를보기입니다.
위 매개 변수를 이해 한 후 IE, FF 및 Chrome 브라우저와 호환되는 스크롤 효과를 만들 수 있습니다.
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.