브라우저 스크롤바를 사용하여 웹 레이아웃에서 선택적 스크롤을 달성하는 방법은 무엇입니까?

웹 레이아웃에서 선택적 스크롤을 위해 브라우저 스크롤 막대 사용

귀하의 문의는 Gizmodo 웹사이트에서 관찰된 고유한 스크롤 동작을 에뮬레이션하려는 것입니다. 즉, 다른 div는 고정된 상태로 유지하면서 브라우저의 기본 스크롤 막대를 사용하여 특정 div 요소의 스크롤을 활성화하는 것이 목표입니다.

제공된 테스트 페이지는 레이아웃 중앙 정렬 및 세로 스크롤 활성화에 대한 이해를 보여줍니다. 그러나 이러한 측면을 결합하는 것은 어려운 것으로 입증되었습니다. 두 가지 요구 사항을 모두 충족하는 포괄적인 솔루션을 제공하겠습니다.

순수한 CSS 솔루션:

Gizmodo의 추가 스크립트를 사용함에도 불구하고 순수 CSS를 사용하여 이 효과를 얻는 것이 가능합니다. 우리 솔루션의 목표는 다음과 같습니다.

• 반응적으로 레이아웃을 중앙에 배치합니다.
• 브라우저의 스크롤 막대를 사용하여 왼쪽 콘텐츠를 수직으로 스크롤합니다.
• 오른쪽 사이드바를 고정된 상태로 유지합니다. 브라우저 창 상단에 배치하고 마우스 오버 시에만 스크롤바를 도입합니다.
• 사이드바 끝에 도달하면 스크롤을 브라우저의 스크롤바로 원활하게 전환합니다.

코드 데모 :

다음 데모 바이올린을 참조하세요.

<pre class="brush:php;toolbar:false">html, body, * {
    padding: 0;
    margin: 0;
}
.wrapper {
    min-width: 500px;
    max-width: 700px;
    margin: 0 auto;
}
#content {
    margin-right: 260px;  /* = sidebar width + some white space */
}
#overlay {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
}
#overlay .wrapper {
    height: 100%;
}
#sidebar {
    width: 250px;
    float: right;
    max-height: 100%;
}
#sidebar:hover {
    overflow-y: auto;
}
#sidebar>* {
    max-width: 225px; /* leave some space for vertical scrollbar */
}

<pre class="brush:php;toolbar:false"><div>

솔루션 이해:

• # 래퍼 div는 전체 레이아웃의 상위 컨테이너 역할을 합니다. 가로 중앙 정렬을 보장합니다.
• #content는 기본 콘텐츠를 포함하며 세로로 스크롤이 가능합니다.
• #overlay는 전체 레이아웃을 스크롤할 수 있는 고정 컨테이너입니다. 브라우저 창 너머로 콘텐츠가 스크롤되는 듯한 느낌을 주는 데 사용됩니다.
• #sidebar는 오른쪽 고정 사이드바입니다. 끝에 도달할 때까지 독립적으로 스크롤하며, 이 시점에서 스크롤은 브라우저의 스크롤바로 전환됩니다.

추가 고려 사항:

• 기본 스크롤 방지 사이드바 호버의 콘텐츠: 마우스가 사이드바 위에 있을 때 기본 콘텐츠의 스크롤을 방지하는 방법을 보여주는 두 번째 바이올린을 만듭니다.
• 유연한 너비: 기본 콘텐츠와 사이드바 모두에 대해 유연한 너비를 구현하는 것이 좋습니다.

이 솔루션을 구현하면 사용자에게 향상된 스크롤 경험을 제공하는 우아한 웹 레이아웃을 만들 수 있습니다.

위 내용은 브라우저 스크롤바를 사용하여 웹 레이아웃에서 선택적 스크롤을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!