그러한 요구 사항에 직면한지 모르겠습니다. dom 요소에 새 하위 요소를 추가 한 다음 새로 추가 된 새 요소가 컨테이너의 범위를 초과하면 다음 그림과 같이 새로 추가 된 자식 요소의 위치로 자동 스크롤해야합니다.
그런 다음 dom 요소 스크롤과 관련된 몇 가지 지식 포인트를 배우면서 위의 그림과 다른 스크롤 관련 기능의 효과를 알 수 있습니다.
이해가 필요한 dom 속성 및 메소드 스크롤 탑, 클라이언트 및 스크롤 하이
scrollTop 속성은 컨테이너 요소 컨텐츠의 최상위 값과 최상위 viewport 뷰포트에서 최고 값의 top 값, 즉 컨테이너 뷰포트를 넘어서 위쪽으로 미끄러지는 컨테이너의 부분의 차이입니다. 이 속성을 수정하여 스크롤 상태를 제어 할 수 있습니다.
clientHeight 는 컨테이너의 높이를 설명하는 dom 속성입니다.
scrollHeight 는 컨테이너 컨텐츠의 높이를 설명하는 dom 속성입니다.
세 가지 속성 사이의 관계는 아래 그림에 나와 있습니다.
getBoundingClientRect ()
이 방법은 left , right , top , bottom , height , width 등과 같은 요소 레이아웃에 필요한 일부 기하학적 특성을 얻는 데 사용됩니다.
Srollby (X, Y)
dom 컨테이너의 scrollTo 방법은 스크롤 바 스크롤의 지정된 거리를 직접 제어하는 데 사용될 수 있습니다. 이 방법은 지정된 요소로 스크롤해야 할 때 더 편리합니다.
srollto (x, y)
dom 컨테이너의 scrollTo 방법은 스크롤 바를 직접 제어하여 지정된 위치로 스크롤 할 수 있습니다. 이 방법은 스크롤 막대를 제어하여 상단 또는 하단으로 스크롤 할 때 더 편리합니다.
롤링 제어 준비를 구현하십시오
먼저 html 준비합시다
<! doctype html> <html> <head> <title> 스크롤 바 설정에 대한 자세한 설명 </title> <tyle> #scroll_container {height : 500px; 너비 : 500px; 오버플로-스크롤; 패딩 : 50px; 박스 사이징 : 국경 박스; } .scroll_item {높이 : 200px; 너비 : 500px; 마진-탑 : 20px; 배경색 : 아쿠아 마린; 디스플레이 : Flex; 정렬 구조 : 센터; 정당화 컨텐츠 : 센터; . id = item4 class = scroll_item> <span> 4 </span> </div> <div id = item5 class = scroll_item> <span> 5 </span> </div> </div> <button onclick = addItem (addItem (addItem)> </div> </body> <cript> 컨테이너를 let. index = 5하자; // 요소 함수 추가 addItem () {index+= 1; retim =`<div id = $ { 'item'+index} class = scroll_item> <span> $ {index} </span> </div>`; container.innerhtml+= 항목; settimeout (() => {scrolltoindex ();})} </script> </html>위의 코드에는 스크롤 가능한 영역이 포함되어 있으며 스크롤 영역에 요소를 추가하거나 지정된 요소 위치로 스크롤 할 수 있습니다. 일반적인 효과는 다음과 같습니다.
기본 구현
scrollTop 의 의미는 이전에 설명되었습니다. 컨테이너 요소 스크롤 탑의 scrollTop 값을 수정하여 스크롤링을 제어 할 수 있습니다. scrollTop 값이 클수록 원래 상태에 비해 스크롤 바의 스크롤 거리가 클수록 ( scrollTop 이 0 일 때).
scrollTop 의 의미를 이해 한 후 scrollTop 사용하여 Scrollbar 컨트롤을 구현할 수 있습니다. 그런 다음 먼저 바닥에 스크롤을 구현하고 위 코드에 scrollToBottom() 메소드를 추가합니다.
함수 scrolltobottom () {y = container.scrollheight-container.clientHeight; container.scrolltop = y;} 상단으로 스크롤하려면 scrollTop 0으로 설정하면됩니다.
함수 scrolltotop () {container.scrolltop = 0;} getBoundingClientRect() 메소드를 결합하여 지정된 요소로 스크롤을 쉽게 구현할 수 있습니다 getBoundingClientRect().top
함수 scrolltoelement (el) {container.scrolltop+= el.getBoundingClientRect (). 상단;} 애니메이션 추가바닥으로 스크롤하십시오
그러나 위의 코드의 스크롤은 너무 뻣뻣합니다. setInterval() 의 도움으로 구현 될 수있는 애니메이션 효과를 추가 할 수 있습니다. 애니메이션 효과 구현 프로세스를 분석하십시오. 애니메이션 구현은 일정 시간 내에 변수의 변경을 완료하는 것 이상입니다. 따라서 먼저 변수 ( scrollTop )의 두 변수의 오프셋과 변경에 필요한 시간을 알아야합니다. 오프셋은 scrollTop 의 최종 값으로 원래 값을 뺀 값이며 변경 시간은 일반적으로 수정 될 수있는 매개 변수로 설정됩니다. 위의 프로세스를 이해 한 후 먼저 하단으로 스크롤하여 예를 들어 봅시다.
// 먼저 Scrolltobottom 함수 기능 Scrolltobottom (el) {if (! el) {el = container; } // 원래 값 let startTop = el.scrolltop; // 최종 값 lettop = el.scrollHeight-el.clientHeight; // 애니메이션 제어 기능 생성 ScrollanimationFn = doanimation (startTop, endtop, 300, el); // 애니메이션 실행, 실행 let interval = setInterval (() => {scrollanimationfn (interval)}, 10)/** * @description : 애니메이션 제어 기능을 생성하는 공장 함수 (클로저 사용) * @param {startValue : 변수 최종 값 지속 시간 : animation eL : exprite scrapute} null */function doanimation (startValue, endValue, duration, el) {// closure를 사용하여 변수를 저장하고 dy 및 단계 (각 애니메이션 스크롤의 거리) dy = 0; let step = (endValue-StartValue)/(시간/10); // 반환 애니메이션 제어 기능 반환 기능 (간격) {dy+= step; if (dy> = endValue-StartValue) {clearInterVal (Interval); } el.scrolltop+= step; }}하단 애니메이션에 스크롤을 추가하려면 추가 기능을 수정하십시오.
함수 addItem () {index+= 1; retim =`<div id = $ { 'item'+index} class = scroll_item> <span> $ {index} </span> </div>`; container.innerhtml+= 항목; settimeout (() => {// scrolltoindex (); scrolltobottom (컨테이너);})}그런 다음 html의 하단 버튼에 스크롤을 추가하십시오.
<버튼 onclick = scrolltobottom ()> 하단으로 스크롤 </button>
위의 방법에 따라 일반적으로 사용되는 애니메이션을 구현하여 상단으로 스크롤 할 수도 있습니다.
// ScrollTotop 함수 기능 작성 ScrollTotop (el) {if (! el) {el = 컨테이너; } // 원래 값 let startTop = el.scrolltop; // 최종 값 let endTop = 0; // 애니메이션 제어 기능 생성 ScrollanimationFn = doanimation (startTop, endtop, 300, el); // 애니메이션 실행, 실행 let interval = setInterval (() => {scrollanimationfn (interval)}, 10)}} 바닥에 스크롤을 조정하려면 애니메이션 중지의 타이밍을 수정해야합니다. 수정 된 doAnimation() 함수는 다음과 같습니다.
함수 doanimation (startValue, endValue, duration, el) {// closure를 사용하여 변수를 저장하고 dy 및 단계 (각 애니메이션 스크롤의 거리) dy = 0; let step = (endValue-StartValue)/(시간/10); 반환 함수 (간격) {dy+= step; // 여기에서 절대 값을 사용하여 (math.abs (dy)> = math.abs (endValue-startValue)) {clearinterval (interval); } el.scrolltop+= step; }} 마지막으로 하단 버튼에 스크롤을 html 추가합니다.
<버튼 onclick = scrolltotop ()> 상단으로 스크롤 </button>
효과는 다음과 같습니다.
먼저 HTML 요소에 필요한 버튼과 입력 상자를 추가하십시오.
<입력 유형 = 숫자 위장기 = 색인으로 스크롤 할 요소를 입력하십시오.
지정된 요소를 스크롤하는 애니메이션 실행 함수 추가 :
함수 scrolltoelement (containerel, el) {if (! containerel) {// 부모 요소 cantorel = 컨테이너; } if (! el) {// input = document.getElementsByTagName ( 'input') [0]; id = 'item'+input.value를하자; if (! input.value) {id = 'item'+index; } el = document.getElementById (id); } let startTop = containerel.scrolltop; endTop = startTop+el.getBoundingClientRect (). 상단; scrollanimationfn = doanimation (starttop, endtop, 300, containerel); let interval = setInterval (() => {scrollanimationfn (interval)}, 10)}}효과는 다음과 같습니다.
scrollTo(x,y) 의 사용 방법은 기본적으로 scrollTop 속성의 사용 방법과 동일합니다. 부모 요소의 scrollTo() 메소드는 스크롤 바를 지정된 위치로 제어 할 수 있으며, 실제로는 scrollTop 의 값을 설정하는 것과 동일합니다. 예를 들어 보겠습니다.
// 여기서 우리는 y 축 스크롤을 예제로 가져옵니다 .Scrollto (0, y); element.scrolltop = y; // 위의 두 문장의 효과는 동일합니다.
따라서 scrollTo() 메소드를 사용하여 스크롤 바를 제어하는 것은 기본적으로 ScrollTop을 사용하는 것과 동일합니다. 우리는 단순히 doAnimation() 함수 만 수정하면됩니다. 코드는 다음과 같습니다.
함수 doanimation (startValue, endValue, duration, el) {// closure를 사용하여 변수를 저장하고 dy 및 단계 (각 애니메이션 스크롤의 거리) dy = 0; let step = (endValue-StartValue)/(시간/10); 반환 함수 (간격) {dy+= step; if (math.abs (dy)> = math.abs (endValue-startValue)) {clearinterval (Interval); } //el.scrolltop+=Step ;//this 코드 라인은 다음 el.scrollto (0, el.scrolltop+step)로 수정됩니다. }} 실행 효과는 scrollTop 사용한 구현과 일치합니다.
기본 구현
scrollBy(x,y) 사용하여 스크롤 바를 제어 할 수도 있습니다. 위에서 언급했듯이 scrollBy() 메소드는 Scrollbar의 지정된 거리를 제어하는 것입니다 (위치가 아님). Scrollby ()를 사용하여 지정된 요소로 스크롤링 요구 사항을 쉽게 구현하십시오. 코드는 다음과 같습니다.
함수 scrolltoelement (containerel, el) {// getBoundingClientRect (). 상단은 자식 요소의 상단에서 부모 요소의 상단까지의 거리 이므로이 값은 부모 요소에 대한 자식 요소의 오프셋입니다. 우리는이 값을 Scrollby로 전달합니다.하단으로 스크롤 :
함수 scrolltobottom (containerel) {let dy = containerel.scrollheight-containerel.clientHeight; Containerel.scrollby (0, dy);}위로 스크롤하십시오
함수 scrolltotop (containerel) {let dy =-(containerel.scrollheight-containerel.clientHeight); Containerel.scrollby (0, dy);}애니메이션 추가
여기에서 scrollBy() 의 매개 변수는 변수의 오프셋이므로 다음과 같은 수정을합니다.
함수 scrolltobottom (containerel) {if (! containerel) {containerel = 컨테이너; } // dy는 오프셋입니다. dy = containerel.scrollheight-containerel.clientHeight; scrollanimationfn = doanimation (dy, 300, 컨테이너 렐); interval = setInterval (() => {scrollanimationfn (interval)}, 10)} 함수 scrolltotop (containerel) {if (! containerel) {containerel = 컨테이너; } // dy는 오프셋 let dy =-(containerel.scrollheight-containerel.clientHeight); scrollanimationfn = doanimation (dy, 300, 컨테이너 렐); interval = setInterval (() => {scrollanimationfn (interval)}, 10)} 함수 scrolltoelement (containerel, el) {if (! containerel) {containerel = 컨테이너; } if (! el) {let input = document.getElementsByTagName ( 'input') [0]; id = 'item'+input.value를하자; if (! input.value) {id = 'item'+index; } el = document.getElementById (id); } // dy는 오프셋입니다. dy = el.getBoundingClientRect (). 상단; scrollanimationfn = doanimation (dy, 300, 컨테이너 렐); let interval = setInterVal (() => {scrollanimationfn (interval)}, 10)}/** * @description : * @param {type} * @return : */function doanimation (dy, duration, el) {// 각 애니메이션 및 단계의 거리를 저장하기 위해 closure를 사용합니다. 실행 된 let step = dy/(시간/10); 반환 함수 (간격) {exe_dy+= step; if (math.abs (exe_dy)> = math.abs (dy)) {clearinterval (간격); } el.scrollby (0, 단계); }} 실행 효과는 scrollTop 사용한 구현과 일치합니다.
위의 : Point_up_2 : Dom Scroll Bar Control의 자세한 요약 및 설명 및 기본 사용 방법입니다.
이것은 HTML의 DOM 요소 스크롤 막대 스크롤 제어 요약에 대한 자세한 설명에 대한 기사입니다. 보다 관련성이 높은 DOM 요소 스크롤 바 스크롤 콘텐츠를 보려면 wulin.com의 이전 기사를 검색하거나 아래 관련 기사를 계속 찾아보십시오. 나는 모두가 앞으로 Wulin.com을 지원하기를 바랍니다!