스크롤을 이해하는 방법
- WBOY앞으로
- 2023-05-23 13:40:321457검색
스크롤 너비 및 높이
scrollHeight
scrollHeight는 오버플로로 인해 웹페이지에 표시할 수 없는 보이지 않는 부분을 포함하여 요소의 전체 높이를 나타냅니다.
scrollWidth
scrollWidth는 요소의 전체 너비를 나타냅니다. , 오버플로로 인해 표시할 수 없는 부분을 포함 웹페이지의 보이지 않는 부분에
[참고] IE7-브라우저의 반환값이 정확하지 않습니다
【1】스크롤바가 없을 때, scrollHeight 및 clientHeight 속성이 동일하고, scrollWidth 및 clientWidth 속성이 동일합니다
<div id="test" ></div><script>//120 120console.log(test.scrollHeight,test.scrollWidth);//120 120console.log(test.clientHeight,test.clientWidth);</script>
【2】 스크롤 막대가 존재하지만 요소 설정 너비 및 높이가 요소 내용 너비 및 높이보다 크거나 같은 경우 스크롤 결과 및 클라이언트 속성이 동일합니다
<div id="test" > 内容<br>内容<br></div><script>//103(120-17) 103(120-17)console.log(test.scrollHeight,test.scrollWidth);//103(120-17) 103(120-17)console.log(test.clientHeight,test.clientWidth);</script>
【3】 스크롤 막대가 있지만 요소 설정 너비 및 높이가 요소 콘텐츠 너비 및 높이보다 작습니다. 즉, 콘텐츠 오버플로가 있습니다. 이 경우 스크롤 속성이 더 큽니다. 클라이언트 속성보다
[참고] Chrome 및 Safari 브라우저에서는 scrollHeight에 padding-bottom이 포함되어 있지만 IE 및 Firefox에는 padding-bottom
<div id="test" > 内容</div><script>//chrome/safari:220(200+10+10)//firefox/IE:210(200+10)console.log(test.scrollHeight);//103(120-17)console.log(test.clientHeight);</script>
page size
문서가 포함되어 있지 않습니다. documentElement.clientHeight는 페이지의 표시 영역 크기를 나타내고, document.documentElement.scrollHeight는 html 요소 콘텐츠의 실제 크기를 나타냅니다. 그러나 각 브라우저의 성능 차이로 인해 다음과 같은 상황으로 나누어집니다
【1】HTML 요소에 스크롤 막대가 없는 경우 IE와 Firefox의 클라이언트 및 스크롤 속성은 항상 동일하며, Safari와 Chrome이 정상적으로 작동하는 동안 시각적 영역의 크기가 반환되고, clientHeight는 시각적 영역의 크기를 반환하고, scrollHeight는 요소의 콘텐츠 크기를 반환합니다.
//firefox: 755 755//chrome: 947 8(body元素的margin)//safari: 744 8(body元素的margin)//IE: 768 768console.log(document.documentElement.clientHeight,document.documentElement.scrollHeight)
【2】html 요소에 스크롤 막대가 있는 경우 모든 브라우저는 정상적으로 행동하십시오. clientHeight는 뷰포트 영역의 크기를 제공하고, scrollHeight는 요소 콘텐츠의 크기를 제공합니다
<body ><script>//firefox: 755 1016(1000+8*2)//chrome: 947 1016(1000+8*2)//safari: 744 1016(1000+8*2)//IE: 768 1016(1000+8*2)console.log(document.documentElement.clientHeight,document.documentElement.scrollHeight)</script>
Compatible
따라서 문서의 실제 높이를 얻으려면 scrollHeight의 최대값과 요소의 clientHeight
var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);var docWidth = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
Scroll length
scrollTop
scrollTop 속성은 콘텐츠 영역 위에 숨겨진 픽셀 수를 나타냅니다. 요소가 스크롤되지 않으면 scrollTop의 값은 0입니다. 요소가 수직으로 스크롤되는 경우 scrollTop의 값은 0보다 크고 요소 위의 보이지 않는 콘텐츠의 픽셀 너비를 나타냅니다. scrollLeft 속성은 요소의 숨겨진 콘텐츠를 나타냅니다. 콘텐츠 영역의 왼쪽 픽셀 수입니다. 요소가 스크롤되지 않으면 scrollLeft의 값은 0입니다. 요소가 가로로 스크롤되면 scrollLeft의 값은 0보다 크고 요소 왼쪽에 보이지 않는 콘텐츠의 픽셀 너비를 나타냅니다.
스크롤 바가 콘텐츠의 하단까지 스크롤되면 다음 방정식이 충족됩니다. scrollHeight == scrollTop + clientHeight
<div id="test" >
内容</div><button id='btn1'>点击</button><div id="result"></div><script>btn1.onclick = function(){
result.innerHTML = 'scrollTop:' + test.scrollTop+';clientHeight:' + test.clientHeight + ';scrollHeight:' + test.scrollHeight
}</script> scrollHeight 및 scrollWidth 속성과 달리 scrollLeft 및 scrollTop은 쓰기 가능합니다.
[참고] scrollLeft 및 scrollTop에 음수 값을 할당하면 오류가 발생하지 않습니다.
<div id="test" >
内容</div><button id='btn1'>向下滚动</button><button id='btn2'>向上滚动</button><script>btn1.onclick = function(){test.scrollTop += 10;}
btn2.onclick = function(){test.scrollTop -= 10;}</script>
페이지 스크롤
이론적으로 페이지 스크롤은 document.documentElement.scrollTop 및 scrollLeft를 통해 반영되고 제어될 수 있지만 Chrome 및 Safari 브라우저는 document.body.scrollTop 및 scrollLeft
<body ><button id='btn1' >点击</button><div id="result" ></div><script>btn1.onclick = function(){
result.innerHTML = 'html的scrollTop:' + document.documentElement.scrollTop +';body的scrollTop:' + document.body.scrollTop;
}</script> </body>
따라서 페이지의 스크롤 높이 호환성은 다음과 같이 작성됩니다.
var docScrollTop = document.documentElement.scrollTop || document.body.scrollTopBack to the top
scrollTop을 사용하여 맨 위로 돌아가는 기능을 구현할 수 있습니다
function scrollTop(){ if((document.body.scrollTop || document.documentElement.scrollTop) != 0){
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
}
<body >
<button id='btn' >回到顶部</button>
<script>function scrollTop(){ if((document.body.scrollTop || document.documentElement.scrollTop) != 0){
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
}
btn.onclick = scrollTop;</script>
</body>
읽기 전용도 두 개 있습니다 전체 페이지 스크롤의 픽셀 값을 얻을 수 있는 창의 속성으로는 pageXOffset과 pageYOffset
pageXOffset이 있습니다.
pageXOffset은 페이지의 가로 방향 스크롤의 픽셀 값을 나타냅니다.
pageYOffset
pageYOffset은 세로 방향으로 스크롤되는 페이지의 픽셀 값
[참고] IE8 브라우저는 <body ><button id='btn1' >点击</button><div id="result" ></div><script>btn1.onclick = function(){
result.innerHTML = 'pageYOffset:' + window.pageYOffset;
}</script> </body>scroll 메서드
를 지원하지 않습니다. scrollTo(x,y) 메서드는 표시된 문서를 스크롤합니다. 문서의 x, y 좌표로 지정된 지점이 표시 영역의 왼쪽 상단에 위치하도록 현재 창
<body ><button id='btn' >滚动</button><script>btn.onclick = function(){scrollTo(0,0);}</script>
scrollBy(x,y)
scrollBy(x,y) 메서드는 스크롤합니다.
scrollIntoView()
Element.scrollIntoView 메서드는 현재 요소를 브라우저의 표시 영역으로 스크롤합니다. 이 메서드는 부울 값을 매개 변수로 사용할 수 있습니다. true인 경우 요소의 상단이 현재 영역의 보이는 부분 상단에 정렬된다는 의미입니다(현재 영역이 스크롤 가능한 경우). false인 경우 요소의 하단이 현재 영역에 정렬된다는 의미입니다. 현재 영역의 보이는 부분의 꼬리(현재 영역이 스크롤 가능한 경우)). 이 매개변수가 제공되지 않으면 기본값은 true입니다<body ><button id='btn1' >向下滚动</button><button id='btn2' >向上滚动</button><script>btn1.onclick = function(){scrollBy(0,100);}
btn2.onclick = function(){scrollBy(0,-100);}</script>
scrollIntoViewIfNeeded()
scrollIntoViewIfNeeded(true) 메소드는 현재 요소가 뷰포트에서 보이지 않을 때까지 브라우저 창이나 컨테이너 요소만 스크롤하고 최종적으로 표시되도록 합니다. . 현재 요소가 뷰포트에 표시되는 경우 이 메서드는 아무 작업도 수행하지 않습니다.
alignCenter 매개변수를 true로 설정하면 요소가 뷰포트의 수직 중앙에 최대한 표시됩니다. 크롬과 사파리에서 지원됩니다.<body ><button id='btn1' >开始滚动</button><button id='btn2' >停止滚动</button><script>var timer = 0;
btn1.onclick = function(){
timer = setInterval(function(){
scrollBy(0,10);
},100)}
btn2.onclick = function(){
clearInterval(timer);
timer = 0;
}</script>
scrollByLines(lineCount)
scrollByLines(lineCount)方法将元素的内容滚动指定的行髙，lineCount值可以是正值， 也可以是负值
[注意]该方法只有safari支持
<div id="test" >
内容</div><button id='btn1'>向下滚动</button><button id='btn2'>向上滚动</button><script>btn1.onclick = function(){test.scrollByLines(1);}
btn2.onclick = function(){test.scrollByLines(-1);}</script>
scrollByPages(pageCount)
scrollByPages(pageCount)方法将元素的内容滚动指定的页面高度，具体高度由元素的高度决定
[注意]该方法只有safari支持
<div id="test" >
内容</div><button id='btn1'>向下滚动</button><button id='btn2'>向上滚动</button><script>btn1.onclick = function(){test.scrollByPages(1);}
btn2.onclick = function(){test.scrollByPages(-1);}</script>
滚动事件
在页面中相应元素发生变化时，scroll事件会在window对象上触发。当然，scroll事件也可以用在有滚动条的元素上
<body ><div id="result" ></div><script>window.onscroll = function(){
result.innerHTML = '页面的scrollTop:' + (document.documentElement.scrollTop||document.body.scrollTop);
}</script> </body>위 내용은 스크롤을 이해하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!