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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
화웨이, 인스퍼(Inspur) 및 기타 부서가 공동으로 만든 오픈소스 컨테이너 미러링 센터인 AtomHub는 공개 테스트를 위해 공식적으로 공개되었으며 국내 서비스를 안정적으로 다운로드할 수 있다고 발표했습니다.
Jan 02, 2024 pm 03:54 PM
화웨이 공식 소식에 따르면, '개발자를 위한 모든 것'이라는 주제로 Open Atomic 개발자 컨퍼런스가 12월 16일부터 17일까지 이틀 동안 우시에서 열렸습니다. 이번 컨퍼런스는 Open Atomic Open Source Foundation인 화웨이가 주도했습니다. Inspur., DaoCloud, Xieyun, Qingyun, Hurricane Engine은 물론 OpenSDV Open Source Alliance, openEuler 커뮤니티, OpenCloudOS 커뮤니티 및 기타 회원 단위가 공동으로 AtomHub Trusted Mirror Center 구축을 시작했습니다. 이는 공식 테스트를 위해 공개되었습니다. AtomHub는 공동 구축, 공동 거버넌스, 공유의 개념을 고수하며 오픈 소스 조직과 개발자에게 중립적이고 개방적이며 공동 구축된 신뢰할 수 있는 오픈 소스 컨테이너 미러 센터를 제공하는 것을 목표로 합니다. DockerHub와 같은 이미지 웨어하우스의 불안정성과 통제불가능성을 고려하여
CMD를 통해 Windows 10 또는 11에 Redhat Podman을 설치하는 방법
Oct 02, 2023 pm 09:33 PM
Windows 11 또는 10에 RedHatPodman 설치 명령 프롬프트 또는 Powershell을 사용하여 Windows 시스템에 RedHatPodman을 설치하려면 아래 단계를 따르십시오. 1단계: 시스템 요구 사항 확인 먼저 Windows 시스템이 최신 업데이트로 실행되고 있는지 확인해야 합니다. Podman 요구 사항을 실행하기 위한 요구 사항을 충족할 수 있습니다. Windows 11 또는 Windows 10 버전 1709(빌드 16299) 이상을 사용해야 하며 WSL2(Linux 2용 Windows 하위 시스템) 및 VM 기능을 활성화해야 합니다. 아직 활성화되지 않은 경우 2단계 명령을 사용할 수 있습니다. 이것을 실행합니다
컨테이너 오류 복구 및 자동 재시작을 위해 Docker를 사용하는 방법
Nov 07, 2023 pm 04:28 PM
컨테이너 기술을 기반으로 한 경량 가상화 플랫폼인 Docker는 다양한 시나리오에서 널리 사용되었습니다. 프로덕션 환경에서는 컨테이너의 고가용성과 자동 장애 복구가 중요합니다. 이 문서에서는 특정 코드 예제를 포함하여 컨테이너 오류 복구 및 자동 다시 시작을 위해 Docker를 사용하는 방법을 소개합니다. 1. 컨테이너 자동 재시작 구성 Docker에서는 컨테이너 실행 시 --restart 옵션을 사용하여 컨테이너 자동 재시작 기능을 활성화할 수 있습니다. 일반적인 옵션은 다음과 같습니다. no: 자동으로 다시 시작하지 않습니다. 조용한
Internet Explorer에서 Edge 열기: MS Edge 리디렉션을 중지하는 방법
Apr 14, 2023 pm 06:13 PM
Internet Explorer가 오랫동안 인기를 끌지 못했다는 것은 비밀이 아니지만 Windows 11이 출시되면서 현실이 시작되었습니다. 나중에 IE를 대체하는 경우도 있지만 이제 Edge는 Microsoft 최신 운영 체제의 기본 브라우저입니다. 현재로서는 Windows 11에서 Internet Explorer를 계속 활성화할 수 있습니다. 그러나 IE11(최신 버전)은 이미 공식적인 종료 날짜인 2022년 6월 15일을 갖고 있으며 시계는 계속 흐르고 있습니다. 이를 염두에 두고 Internet Explorer가 때때로 Edge를 여는 것을 발견했을 수 있으며 마음에 들지 않을 수도 있습니다. 그럼 왜 이런 일이 일어나는 걸까요? 존재하다
win11에서 ie11 브라우저를 사용할 수 없으면 어떻게 해야 합니까? (win11은 IE 브라우저를 사용할 수 없습니다)
Feb 10, 2024 am 10:30 AM
점점 더 많은 사용자들이 win11 시스템을 업그레이드하기 시작하고 있습니다. 사용자마다 사용 습관이 다르기 때문에 여전히 많은 사용자들이 ie11 브라우저를 사용하고 있습니다. 그렇다면 win11 시스템에서 ie 브라우저를 사용할 수 없으면 어떻게 해야 합니까? windows11은 여전히 ie11을 지원하나요? 해결책을 살펴보겠습니다. win11에서 ie11 브라우저를 사용할 수 없는 문제 해결 방법 1. 먼저 시작 메뉴를 마우스 오른쪽 버튼으로 클릭한 후 "명령 프롬프트(관리자)"를 선택하여 엽니다. 2. 연 후 "Netshwinsockreset"을 직접 입력하고 Enter를 눌러 확인합니다. 3. 확인 후 "netshadvfirewallreset&rdqu"를 입력하세요.
C++ STL 컨테이너를 정렬하는 방법은 무엇입니까?
Jun 02, 2024 pm 08:22 PM
C++에서 STL 컨테이너를 정렬하는 방법: sort() 함수를 사용하여 std::Vector와 같은 컨테이너를 제자리에 정렬합니다. 순서가 지정된 컨테이너 std::set 및 std::map을 사용하면 삽입 시 요소가 자동으로 정렬됩니다. 사용자 정의 정렬 순서의 경우 문자열 벡터를 알파벳순으로 정렬하는 것과 같은 사용자 정의 비교기 클래스를 사용할 수 있습니다.
C++ STL 컨테이너의 일반적인 유형은 무엇입니까?
Jun 02, 2024 pm 02:11 PM
C++STL에서 가장 일반적인 컨테이너 유형은 Vector, List, Deque, Set, Map, Stack 및 Queue입니다. 이러한 컨테이너는 동적 배열, 이중 연결 목록, 키 및 값 기반 연관 컨테이너와 같은 다양한 데이터 스토리지 요구 사항에 대한 솔루션을 제공합니다. 실제로 STL 컨테이너를 사용하여 학생 성적을 저장하는 등 데이터를 효율적으로 구성하고 액세스할 수 있습니다.
시대의 끝: Internet Explorer 11이 만료되었습니다. 알아야 할 사항은 다음과 같습니다.
Apr 20, 2023 pm 06:52 PM
2022년 6월 15일은 Microsoft가 IE11(Internet Explorer 11)에 대한 지원을 종료하고 레거시 브라우저 장을 마감하는 날입니다. 회사는 한동안 사용자에게 이 수명 종료 날짜를 상기시키고 Microsoft Edge로의 전환을 계획할 것을 촉구해 왔습니다. Microsoft는 Windows용 최신 기본 웹 브라우저로 IE11을 Windows 8.1에 번들로 제공합니다. 비록 (현재의) Chrome 수준에는 도달하지 못했지만 2014년에는 IE8에 이어 두 번째로 많이 사용된 데스크톱 브라우저였습니다. 물론 20으로
