[css] WebKit / Blink에서 MacOS 트랙 패드 사용자에게 스크롤 막대가 숨겨지지 않도록 방지

스크롤 막대의 모양은 WebKit의 -webkit-scrollbar유사 요소  ^{[ blog ]} 로 제어 할 수 있습니다 . -webkit-appearance ^{[ docs ]} 를 로 설정하여 기본 모양과 동작을 비활성화 할 수 있습니다 none.

기본 스타일을 제거하고 있으므로 스타일을 직접 지정해야합니다. 그렇지 않으면 스크롤 막대가 표시되지 않습니다. 다음 CSS는 숨은 스크롤 막대의 모양을 재현합니다.

예 ( jsfiddle )

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 (Chrome) 스크린 샷

답변

// Plain JS:
var el = document.getElementById('scrollable-section');
el.scrollTop = 1;
el.scrollTop = 0;

// jQuery:
$('#scrollable-section').scrollTop(1).scrollTop(0);

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}