WebKit/Blink 브라우저의 macOS 트랙패드에서 스크롤 막대가 사라지는 것을 방지하려면 어떻게 해야 합니까?

WebKit/Blink에서 트랙패드 사용자의 스크롤 막대가 사라지는 것을 방지

macOS의 WebKit/Blink 브라우저(Safari/Chrome)의 기본 동작은 오랫동안 사용자로부터 스크롤 막대를 자동으로 숨기는 것이었습니다. 10.7 이상 버전(Mac OS X Lion)에서 트랙패드와 상호 작용합니다. 이 동작은 요소의 스크롤 가능성을 나타내는 일반적인 시각적 신호를 제거하므로 특히 문제가 될 수 있습니다.

문제 설명

일관되게 표시되는 스크롤 막대를 보장하는 데 어려움이 발생합니다. WebKit 기반 브라우저의 스크롤 가능한 요소에 대해 macOS.

솔루션

WebKit은 -webkit-scrollbar 의사 요소를 사용하여 스크롤 막대를 광범위하게 조작할 수 있는 강력한 의사 요소 시스템을 제공합니다. 항상 보이는 스크롤 막대를 유지하려면:

1. 기본 모양 비활성화: -webkit-appearance 속성을 활용하고 없음으로 설정하여 자동 숨기기 동작을 무시합니다.
2. 사용자 정의 스타일: 스크롤 막대에 대한 특정 스타일 기본 설정을 수동으로 정의합니다. 기본 모양을 제거하면 스크롤이 보이지 않을 수 있습니다. 바. 다음 속성 지정을 고려하십시오.

• -webkit-scrollbar-track: 배경색 및 테두리 반경
• -webkit-scrollbar- 엄지손가락: 테두리, 배경색, 테두리 radius
• -webkit-scrollbar-width 및 -webkit-scrollbar-height: 가로 및 세로 스크롤 막대의 크기

예

다음 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; 
} 

시각적 시연

추가 참고사항

• 이 솔루션은 WebKit 기반 브라우저에만 적용됩니다. macOS.
• 제공된 CSS는 예시이며 원하는 모양에 맞게 맞춤화할 수 있습니다.

위 내용은 WebKit/Blink 브라우저의 macOS 트랙패드에서 스크롤 막대가 사라지는 것을 방지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!