WebKit/Blink에서 트랙패드 사용자에게 스크롤바가 항상 표시되도록 하려면 어떻게 해야 합니까?

WebKit/Blink에서 트랙패드 사용자를 위한 숨겨진 스크롤바 극복

UIKit/Blink의 기본 동작은 MacOS의 트랙패드 사용자를 위해 스크롤바를 숨겨 잠재적으로 사용자를 방해합니다. 상호 작용. 이 문제를 해결하고 일관된 스크롤 막대 표시를 보장하려면 다음 단계를 따르세요.

1. 기본 스크롤 막대 동작 비활성화:

-webkit-appearance: none;을 사용하여 WebKit의 기본 스크롤 막대 모양을 비활성화합니다. ::-webkit-scrollbar 의사 요소의 CSS 속성

2. 사용자 정의 스크롤바 스타일 정의:

기본 스타일이 제거되었으므로 직접 정의해야 합니다. 다음 CSS는 숨겨진 스크롤 막대의 모양을 재현합니다.

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

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

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

.frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

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

3. 스크롤 가능한 요소에 스타일 적용:

스크롤 가능한 요소에 사용자 정의 CSS를 적용하여 트랙패드 사용에 관계없이 스크롤 막대가 항상 표시되도록 합니다. 이는 일관된 사용자 경험을 제공하고 잠재적인 혼란을 제거합니다.

위 내용은 WebKit/Blink에서 트랙패드 사용자에게 스크롤바가 항상 표시되도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!