WebKit/Blink 브라우저에서 트랙패드 사용자를 위해 macOS에서 스크롤 막대 표시를 어떻게 보장할 수 있습니까?

WebKit/Blink에서 MacOS 트랙패드 사용자의 스크롤 막대 가시성 보장

Safari 및 Chrome과 같은 WebKit/Blink 브라우저에서 MacOS의 스크롤 막대 OS X Lion(10.7) 이후로 이상한 동작을 겪었습니다. 트랙패드를 사용할 때 스크롤 막대는 사용자 커서가 스크롤 가능 영역 위로 이동할 때까지 자동으로 숨겨집니다. 미니멀리스트 터치처럼 보일 수 있지만, 특히 스크롤 막대가 스크롤 가능한 요소의 유일한 표시기 역할을 할 때 이 동작은 혼란을 초래할 수 있습니다.

해결책: WebKit의 의사 요소 활용

이 문제를 해결하고 스크롤 막대가 계속 표시되도록 하려면 WebKit의 -webkit-scrollbar 의사 요소. -webkit-appearance: none을 사용하여 기본 모양과 동작을 비활성화하면 스크롤 막대의 스타일을 제어하고 가시성을 보장할 수 있습니다.

.frame::-webkit-scrollbar {
    -webkit-appearance: none;
}

그러나 기본 스타일을 재정의하므로 또한 스크롤 막대의 모양을 직접 정의해야 합니다. 다음 CSS는 반투명 숨김 스크롤 막대를 다시 만듭니다.

.frame::-webkit-scrollbar:vertical {
    width: 11px;
}

.frame::-webkit-scrollbar:horizontal {
    height: 11px;
}

.frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white;
    background-color: rgba(0, 0, 0, .5);
}

.frame::-webkit-scrollbar-track { 
    background-color: #fff; 
    border-radius: 8px; 
}

이러한 수정을 통해 스크롤 가능한 요소의 스크롤 막대는 트랙패드 사용이나 커서 위치에 관계없이 MacOS에서 계속 표시되므로 명확성과 편의성이 향상됩니다. 사용자를 위한 네비게이션.

위 내용은 WebKit/Blink 브라우저에서 트랙패드 사용자를 위해 macOS에서 스크롤 막대 표시를 어떻게 보장할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!