>웹 프론트엔드 >CSS 튜토리얼 >WebKit/Blink에서 트랙패드 사용자에게 스크롤바가 항상 표시되도록 하려면 어떻게 해야 합니까?

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

DDD
DDD원래의
2024-12-30 06:55:10392검색

How Can I Make Scrollbars Always Visible for Trackpad Users in 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.