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

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

---

10.7 이후 MacOS에서 WebKit / Blink (Safari / Chrome) 기본 동작 (Mac OS X Lion)은 트랙 패드 사용자가 사용하지 않을 때 스크롤 막대를 숨기는 것입니다. 이것은 혼란 스러울 수 있습니다 . 스크롤 막대는 종종 요소를 스크롤 할 수있는 유일한 시각적 신호입니다.

예 ( jsfiddle )

HTML

<div class="frame">
    Foo<br />
    Bar<br />
    Baz<br />
    Help I'm trapped in an HTML factory! 
</div>

CSS

.frame {
    overflow-y: auto;
    border: 1px solid black;
    height: 3em;
    width: 10em;
    line-height: 1em;
}​

WebKit (Chrome) 스크린 샷

프레스토 (오페라) Screenshot

---

WebKit의 스크롤 가능한 요소에 항상 스크롤 막대를 표시하려면 어떻게해야합니까?

---

스크롤 막대의 모양은 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) 스크린 샷

---

스크롤 가능한 섹션을 동적으로 추가하는 한 페이지 웹 응용 프로그램의 경우 프로그래밍 방식으로 한 픽셀을 아래로 스크롤하여 OSX의 스크롤 막대를 트리거합니다.

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

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

시각적 큐 페이드 인 / 아웃을 트리거합니다.

---

Here is a shorter bit of code that reenables scroll bars across your entire website. I'm not sure if it's much different than the current most popular answer but here it is:

::-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);
}

Found at this link: http://simurai.com/blog/2011/07/26/webkit-scrollbar

---

Browser scrollbars don't work at all on iPhone/iPad. At work we are using custom JavaScript scrollbars like jScrollPane to provide a consistent cross-browser UI: http://jscrollpane.kelvinluck.com/

It works very well for me - you can make some really beautiful custom scrollbars that fit the design of your site.

---

Another good way of dealing with Lion's hidden scroll bars is to display a prompt to scroll down. It doesn't work with small scroll areas such as text fields but well with large scroll areas and keeps the overall style of the site. One site doing this is http://versusio.com, just check this example page and wait 1.5 seconds to see the prompt:

http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb

The implementation isn't hard but you have to take care, that you don't display the prompt when the user has already scrolled.

You need jQuery + Underscore and

$(window).scroll to check if the user already scrolled by himself,

_.delay() to trigger a delay before you display the prompt -- the prompt shouldn't be to obtrusive

$('#prompt_div').fadeIn('slow') to fade in your prompt and of course

$('#prompt_div').fadeOut('slow') 사용자가 프롬프트를 본 후 스크롤하면 페이드 아웃

또한 Google 웹 로그 분석 이벤트를 바인딩하여 사용자의 스크롤 동작을 추적 할 수 있습니다.

참고 URL : https://stackoverflow.com/questions/7855590/preventing-scroll-bars-from-being-hidden-for-macos-trackpad-users-in-webkit-blin