브라우저의 기본 스크롤 막대를 사용하여 특정 DIV를 스크롤 가능하게 만드는 방법은 무엇입니까?

브라우저의 기본 스크롤바로 DIV 스크롤

쿼리

문제:

어려움을 겪고 있습니다. 브라우저의 기본 스크롤 막대를 사용하여 특정 DIV를 스크롤 가능하게 만드는 동시에 웹페이지의 콘텐츠를 중앙에 정렬합니다.

목표:

왼쪽 메인 스크롤바를 사용하여 가로 중앙 레이아웃을 생성합니다. 콘텐츠는 브라우저의 기본 스크롤 막대로 세로로 스크롤할 수 있고 오른쪽 사이드바는 상단에 고정되어 마우스를 콘텐츠 위로 가져갈 때만 스크롤할 수 있습니다.

해결책

Gizmodo 예제에는 다음을 위한 스크립트가 포함되어 있습니다. 사이드바 처리를 통해 순수한 CSS를 사용하여 원하는 효과를 얻을 수 있습니다. 해결 방법은 다음과 같습니다.

1. 다양한 창 크기에 맞게 조정하면서 레이아웃을 가로 중앙에 배치
2. 브라우저의 스크롤 막대를 사용하여 세로로 스크롤 가능한 기본 콘텐츠 섹션 만들기
3. 사이드바 수정 필요할 때 대신하는 별도의 스크롤 기능

구현

CSS:

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 */
}

마크업:

<div class="wrapper">
    <div>

사용자 정의

메인 콘텐츠와 사이드바 너비를 모두 원하는 대로 구성할 수 있습니다. 사이드바에서 스크롤 이벤트가 발생하는 것을 방지하기 위해 사이드바는 기본 콘텐츠 스크롤 컨테이너의 하위 항목이 아닙니다. 이를 통해 별도의 스크롤 동작이 가능합니다.

결론

이 솔루션은 기본 콘텐츠에 대해 브라우저의 기본 스크롤 막대를 활용하여 기본 콘텐츠와 사이드바에 대한 독립적인 스크롤 기능을 갖춘 중앙 집중식 레이아웃을 제공합니다.

위 내용은 브라우저의 기본 스크롤 막대를 사용하여 특정 DIV를 스크롤 가능하게 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!