스크롤을 이해하는 방법
스크롤 너비 및 높이
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>
[참고] 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.scrollTop
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>
를 지원하지 않습니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7488
15
1377
52
77
11
52
19
19
40
스크롤 버튼이란 무엇입니까?
Feb 22, 2023 pm 02:29 PM
스크롤은 컴퓨터 키보드의 기능 키인 스크롤 잠금 키입니다. 스크롤 키는 워드와 엑셀에서 흔히 사용되는 기능입니다. 스크롤 잠금을 끄고 페이지 넘김 키를 사용하면 셀의 선택 영역이 이동하지만 스크롤 잠금 키를 누르면 선택 영역이 이동하지 않습니다. .
키보드 스크롤 표시등은 무엇을 의미합니까?
Feb 20, 2023 pm 01:42 PM
키보드 스크롤 표시등이 켜져 있다는 것은 "Scroll Lock"이 활성화되었음을 의미합니다. Win 시스템에서는 Scroll Lock 키가 사용되지 않지만 일부 소프트웨어는 이 키를 누른 후 Excel 위쪽 및 아래쪽 키가 잠깁니다. 스크롤 커서는 페이지를 스크롤합니다. 이 키를 놓으면 위쪽 및 아래쪽 키를 누르면 페이지가 스크롤되지 않고 커서가 스크롤됩니다.
스크롤을 이해하는 방법
May 23, 2023 pm 01:40 PM
스크롤 너비 및 높이 scrollHeight scrollHeight는 오버플로로 인해 웹 페이지에 표시할 수 없는 보이지 않는 부분을 포함하여 요소의 전체 높이를 나타냅니다. scrollWidth scrollWidth는 웹에 표시할 수 없는 보이지 않는 부분을 포함하여 요소의 전체 너비를 나타냅니다. 오버플로로 인한 페이지 [참고] IE7-Browser 반환 값이 정확하지 않습니다. [1] 스크롤 막대가 없는 경우 scrollHeight 및 clientHeight 속성이 동일하고, scrollWidth 및 clientWidth 속성이 동일합니다. //120120console.log(test.scrollHeight ,test.s
v-on:scroll을 사용하여 Vue에서 스크롤 이벤트를 수신하는 방법
Jun 11, 2023 pm 12:14 PM
Vue는 현재 가장 널리 사용되는 프런트엔드 프레임워크 중 하나입니다. Vue는 일반적인 이벤트 모니터링 외에도 v-on:scroll이라는 스크롤 이벤트 모니터링을 위한 지침도 제공합니다. 이 글에서는 v-on:scroll을 사용하여 Vue에서 스크롤 이벤트를 수신하는 방법을 자세히 소개합니다. 1. v-on:scroll 명령어의 기본 사용법 v-on:scroll 명령어는 DOM 요소의 스크롤 이벤트를 모니터링하는 데 사용됩니다. 기본 사용법은 다음과 같습니다. <divv-on:scroll="sc
CSS에서 스크롤을 숨기는 방법
Jan 28, 2023 pm 02:02 PM
CSS에서 스크롤을 숨기는 방법: 1. Firefox에서는 "scrollbar-width: none; /* Firefox */" 속성을 통해 스크롤 막대를 숨길 수 있습니다. 2. IE 브라우저에서는 "-ms-prefix"를 사용할 수 있습니다. " 속성 스크롤 막대 스타일을 정의합니다. 3. Chrome 및 Safari에서는 CSS 스크롤 막대 선택기를 사용한 다음 "display:none"을 통해 숨길 수 있습니다.
이더 리움 스크롤이란 무엇입니까? 이더 리움 스크롤을 작동하는 방법?
Feb 15, 2025 pm 10:33 PM
이더 리움 스크롤은 샤딩 및 ZK- 롤업 기술을 통해 이더 리움 네트워크의 확장 성을 향상 시키도록 설계된 레이어 2 스케일링 솔루션입니다. 이 두 기술을 결합하여 거래를 병렬로 처리하고 효율적으로 검증하여 네트워크 처리량을 크게 개선하고 거래 수수료를 줄입니다. 스크롤은 EVM (Ethereum Virtual Machines)을위한 호환 확장 계층으로 설계되었으며, 사용자는 거래를 빠르고 경제적으로 처리 할 수 있습니다.
빠르게 성장하는 영지식 레이어-2 네트워크 스크롤(Scroll)은 10월 19일에 에어드롭을 시작할 것이라고 확인했습니다.
Oct 12, 2024 am 12:14 AM
이러한 후퇴는 부분적으로는 공포와 탐욕 지수가 45 미만으로 정체되면서 더 넓은 암호화폐 시장이 잘 지내지 못하고 있기 때문입니다. 비트코인도 65,000달러의 저항점을 넘어서는 데 실패했습니다.
스크롤(SCR) 토큰 출시: 분산화를 향한 발걸음
Oct 11, 2024 pm 10:18 PM
토큰 출시는 Scroll이 거버넌스를 강화하고 Ethereum 생태계의 핵심 플레이어로서의 역할을 강화하는 것을 목표로 하기 때문에 이루어졌습니다.
