브라우저의 스크롤바를 사용하여 사이드바 스크롤을 독립적으로 만드는 방법은 무엇입니까?

브라우저의 스크롤바를 사용하여 특정 DIV 콘텐츠를 스크롤하는 방법

소개

많은 웹사이트, Gizmodo와 같이 콘텐츠의 일부가 브라우저의 기본 페이지와 함께 스크롤되는 레이아웃이 있습니다. 스크롤바는 다른 부분은 고정된 상태로 유지됩니다. 복잡해 보일 수도 있지만 CSS를 통해 완전히 구현할 수 있습니다.

솔루션

이 효과를 만들려면 여러 측면을 고려해야 합니다.

• 가로 중심 맞추기: 전체 레이아웃이 브라우저 내에서 가로 중심에 있는지 확인하세요. window.
• 기본 콘텐츠 스크롤: 기본 스크롤 막대를 사용하여 왼쪽의 기본 콘텐츠를 수직으로 스크롤할 수 있습니다.
• 고정 사이드바: 창 상단에 고정된 오른쪽의 사이드바(마우스를 위에 올려 놓을 때 제외)
• 스크롤 오버플로: 사이드바 위로 마우스를 가져가면 사이드바 스크롤을 활성화하여 자체 스크롤을 사용할 수 있습니다. 스크롤바.

구현

CSS:

마크업:

설명:

• 래퍼: 기본 콘텐츠와 사이드바 모두에 고정 너비 컨테이너를 제공합니다.
• 콘텐츠: 스크롤 가능한 기본 콘텐츠를 정의합니다.
• 오버레이: 전체 브라우저 뷰포트를 덮는 고정 요소로, 메인 콘텐츠가 표시되는 동안에도 사이드바가 계속 표시되도록 합니다. 스크롤됨.
• 사이드바: 사이드바를 오른쪽에 배치하고 마우스를 올려놓은 경우에만 스크롤할 수 있도록 합니다.

사이드바를 가리킬 때 스크롤 방지

원하는 경우 사이드바의 스크롤 시작을 방지할 수 있습니다. HTML 구조와 CSS를 수정하여 마우스를 가져가면:

CSS:

마크업:

위 내용은 브라우저의 스크롤바를 사용하여 사이드바 스크롤을 독립적으로 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!