getBoundingClientRect()를 사용하여 div 컨테이너의 고정 스크롤을 달성하는 방법

이번에는 div 컨테이너의 스크롤 및 수정을 수행하기 위해 getBoundingClientRect()를 사용하는 방법을 보여 드리겠습니다. getBoundingClientRect()를 사용하여 div 컨테이너의 스크롤 및 수정을 수행하는 데 필요한 주의 사항은 무엇입니까? 다음은 실제 사례입니다. 보세요.

ele.getBoundingClientRect() 메소드는 전체 뷰 창에서 요소의 위치를 ​​가져오는 것입니다

반환될 수 있는 값은 width,height,top,left,x,y,right,bottom입니다.

scene

div 중 하나가 뷰포트

중간에 있을 때 원하는 효과는 페이지가 이 div로 스크롤될 때 div가 페이지 상단에 고정되는 것입니다. 기타 스크롤은 변경되지 않습니다

Idea

구현 아이디어는 이 방법을 사용하여 이 div의 최고 값을 얻을 수 있습니다.

이 최고 값은 이 div에서 뷰포트까지의 최고 값입니다

페이지 스크롤을 들어보세요 Event 그런 다음 최고 값이 <=0일 때 이 div에 고정 CSS 스타일을 추가할 수 있습니다

이러한 효과를 얻을 수 있습니다

이 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 콘텐츠를 보려면 결제하세요. PHP 중국어 웹사이트의 다른 관련 기사도 주목하세요!

관련 자료:

html의 표준 작성 방법과 Dreamweaver에서 생성된 코드의 차이점은 무엇입니까? ,

html에 플래시 비디오 형식(flv, swf) 파일을 추가하는 방법

비활성화 및 읽기 전용 사용 방법 입력을 읽기 전용 효과로 설정하세요

위 내용은 getBoundingClientRect()를 사용하여 div 컨테이너의 고정 스크롤을 달성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!