분류 html

두 개의 브라우저가 스크롤 바에 들어갔다

컨텐츠 정보

  • 조회 505 (작성일 )

본문

스크롤바는 문서를 탐색 할 수 있는 기본 수단으로 작동하는 겸손하지만 생산적인 메커니즘입니다. 그러나 이것이 스크롤바가 할 수 있는 전부는 아닙니다! 이 겸손한 작업장은 문서 진행 시간에 대한 이중 힌트를 제공하여 문서 길이에 대한 중요한 힌트를 제공합니다.


https://www.filamentgroup.com/lab/scrollbars/ 


스크롤바가 공격을 받고 있습니다. 스크롤 재킹은 기본 스크롤 동작을 가로 채서 문서 길이와 스크롤바 높이 사이의 묵시적 계약을 깨뜨립니다.


또한 터치 장치는 스크롤 막대를 숨기는 것으로 유명 해져 넘침 요소가 스크롤 될 때까지 보이지 않게 되어 넘치거나 스크롤 되지 않는 컨테이너의 혼란을 위한 디자인 미학을 거래합니다.


클래식 데스크톱 운영 체제는 이러한 추세를 계속하여 클래식 스크롤 바의 디자인 방해를 최소화하려고 시도했습니다.


우리가 너무 멀어지기 전에 몇 가지 정의를 벗어 봅시다.

  • 눈에 잘 띄는 스크롤바 : 화면 영역을 차지하는 스크롤바. 이들은 컨텐츠 위에 오버레이 되지 않지만 그 옆에 나타납니다.
  • 눈에 잘 띄지 않는 스크롤바 : 컨텐츠 위에 있는 스크롤바. 이것들은 그들이 속한 컨테이너에서 스크린 공간을 빼지 않습니다.

현재 행동 

기본적으로 iOS 및 Android 스크롤 막대 모두에서 눈에 거슬리지 않습니다.


Mac OS (작성시 Mojave)에서 요소를 스크롤 할 때까지 스크롤 막대가 숨겨집니다. 마우스가 컴퓨터에 연결되어 있지 않은 경우의 기본 동작입니다. 시스템 환경 설정의 일반 패널에는 다음과 같은 세 가지 옵션이 있습니다.


Mac OS General System Preferences pane with Automatically based on mouse or trackpad selected 


이 환경 설정은 Chrome, Firefox 및 Safari 및 새로운 Chromium 기반 Edge에서 스크롤바의 동작을 제어하기 위해 확인되었습니다.


Mac OS 사용자 환경 설정이 스크롤 막대의 방해를 어떻게 변화 시키는 지 보려면 다음 비디오를 보십시오.


Windows 10의 경우 설정 → 디스플레이 → Windows 단순화 및 개인화에 유사한 환경 설정이 있습니다.


Windows 10 preference pane with Automatically hide scroll bars in Windows checked 


불행히도 이 환경 설정을 선택하더라도 Chrome, EdgeHTML 기반의 Firefox, Chrome, Internet Explorer 및 Edge의 스크롤 막대 동작에는 영향을 미치지 않습니다.


문제점 


Demo of the default scrollbar style on Windows 10 (in Chrome) 


Windows 스크롤 막대는 기본적으로 눈에 잘 띄지 않을 뿐만 아니라 디자인 측면에서 특히 무겁습니다. 기본적으로 Mac OS보다 훨씬 넓으며 일반적으로 페이지 색상 팔레트가 아닌 운영 체제 색상을 따릅니다.


Mac 환경에 익숙하지만 멀티 플랫폼 웹 경험을 디자인하는 디자이너에게는 최종 사용자에게 많은 성능 부담을 주지 않는 방식으로 모든 사람을 만족 시키는 것이 까다로울 수 있습니다.


우리의 요구 사항 

  • 우리는 데스크탑 스크롤바가 보다 시각적으로 매력적이기를 원합니다. 시각적 디자인 미학과 더 잘 조화 되어야 하는 뷰포트 내부의 오버플로 컨테이너에 특히 중요합니다 (제 생각에 비주얼은 페이지 수준 스크롤 막대에 대해서는 중요하지 않지만 논쟁의 여지가 있습니다).
  • 스크롤바가 차지할 수 있는 영역을 최소화하십시오. Windows 스크롤 막대는 기본적으로 눈에 잘 띄지 않으며 매우 넓습니다.
  • 사용자 기본 설정의 변경 사항을 존중하십시오. 사용자가 스크롤 막대 동작에 기본이 아닌 옵션을 선택한 경우 가능하면 해당 환경 설정을 준수하십시오.
  • 눈에 거슬리지 않는 스크롤 막대를 정규화 하고 최종 사용자에게 성능 부담을 주는 JavaScript 무거운 솔루션을 피하십시오 (예 : 멋진 OverlayScrollbars 플러그인).


CSS로 얼마나 멀리 갈 수 있습니까? 


<div class="overflowing-element"></div>
.overflowing-element {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}

Internet Explorer 및 EdgeHTML 기반 Edge에서 눈에 잘 띄지 않는 스크롤 막대를 사용하려면 -ms-overflow-style을 사용하십시오. -ms-autohiding-scrollbar; 그리고 그들은 마술처럼 교환 할 것입니다 (쉽지 않습니까?).


iOS 13이 출시되면 -webkit-overflow-scrolling : iOS의 스크롤 물리 개선을 위해 터치가 필요하지 않을 수도 있습니다 (이전 iOS 버전의 경우 약간만 유지하려는 경우도 있음). 


오버 플로우 컨테이너 컨텐츠가 경계로 스크롤 될 때 문서가 스크롤 되는 방식을 제어하는 ​​관련 CSS 특성 오버 스크롤 동작을 읽을 수도 있습니다.


Firefox 


Firefox는 접두사 없는 CSS 속성 scrollbar-color 및 scrollbar-width를 지원합니다.


명확하게 하기 위해 이 코드 예제는 Internet Explorer 11에서 지원하지 않는 CSS 변수를 사용합니다.


:root {
--scrollbar-track-color: transparent;
--scrollbar-color: rgba(0,0,0,.2);

--scrollbar-width: thin; /* or `auto` or `none` */
}
.overflowing-element {
scrollbar-width: var(--scrollbar-width);
scrollbar-color: var(--scrollbar-color) var(--scrollbar-track-color);
}


크롬 / 사파리 / 크롬-에지 / et al 


WebKit / Blink 기반 브라우저는 사용자 지정을 위해 비표준 의사 요소를 지원합니다.


:root {
--scrollbar-track-color: transparent;
--scrollbar-color: rgba(0,0,0,.2);

--scrollbar-size: .375rem;
--scrollbar-minlength: 1.5rem; /* Minimum length of scrollbar thumb (width of horizontal, height of vertical) */
}
.overflowing-element::-webkit-scrollbar {
height: var(--scrollbar-size);
width: var(--scrollbar-size);
}
.overflowing-element::-webkit-scrollbar-track {
background-color: var(--scrollbar-track-color);
}
.overflowing-element::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-color);
/* Add :hover, :active as needed */
}
.overflowing-element::-webkit-scrollbar-thumb:vertical {
min-height: var(--scrollbar-minlength);
}
.overflowing-element::-webkit-scrollbar-thumb:horizontal {
min-width: var(--scrollbar-minlength);
}


Codepen에서 이 CSS 전용 스크롤바 사용자 정의 데모를 확인하십시오.


스톡 스크롤바 동작을 사용하여 이것을 동일한 데모와 비교


그러나 이 코드에는 사소한 문제가 있습니다. ::-webkit-scrollbar 의사 요소에서 높이 또는 너비를 설정하면 Mac OS에서는 눈에 거슬리지 않는 스크롤 막대가 눈에 거슬리지 않게 교체됩니다 (기본 구성 재정의). 그러나 약간의 JavaScript로이 문제를 해결할 수 있습니다!


CSS와 작은 비트-오-자바 스크립트 


기본 스크롤바가 방해가 되지 않는지를 감지하기 위해 작은 JavaScript 기능 테스트를 추가 할 수 있습니다. 다음과 같이 보입니다 :


/*
* Scrollbar Width Test
* Adds `layout-scrollbar-obtrusive` class to body
* if scrollbars use up screen real estate.
*/

var parent = document.createElement("div");
parent.setAttribute("style", "width:30px;height:30px;");
parent.classList.add('scrollbar-test');

var child = document.createElement("div");
child.setAttribute("style", "width:100%;height:40px");
parent.appendChild(child);
document.body.appendChild(parent);

// Measure the child element, if it is not
// 30px wide the scrollbars are obtrusive.
var scrollbarWidth = 30 - parent.firstChild.clientWidth;
if(scrollbarWidth) {
document.body.classList.add("layout-scrollbar-obtrusive");
}

document.body.removeChild(parent);


스크롤바가 눈에 띄지 않을 때 레이아웃 스크롤바를 방해하는 클래스를 문서에 적용합니다. 이를 사용하여 앞에서 설명한 스와핑 동작을 피하고 사용자 기본 설정을 존중하면서 눈에 잘 띄지 않는 스크롤 막대에만 너비와 높이를 적용 할 수 있습니다.


.layout-scrollbar-obtrusive .layout-scrollbar::-webkit-scrollbar {
height: var(--scrollbar-size);
width: var(--scrollbar-size);
}


Codepen에서 이 CSS + JavaScript 스크롤 막대 사용자 정의 데모를 확인하십시오.


스톡 스크롤바 동작을 사용하여 이것을 동일한 데모와 비교


우리는 어떻게 했습니까? 


눈에 잘 띄지 않는 스크롤 막대가 있는 터치 장치 (예 : iOS 및 Android)에서는 기본 동작이 무료로 유지됩니다.


Mac OS에서는 사용자의 시스템 환경 설정을 존중할 수 있습니다. 즉, 눈에 잘 띄지 않는 스크롤 바와 눈에 잘 띄지 않는 스크롤 바를 서로 바꾸지 않아도 됩니다. 우리는 디자인 요구 사항을 충족시키기 위해 눈에 잘 띄는 눈에 보이는 스크롤 막대에만 스타일을 적용합니다.


Windows의 Firefox 및 Chrome에는 눈에 잘 띄지 않는 스크롤 막대 옵션이 없었지만 여기에서도 CSS 전용 컨트롤을 적용 할 수 있었습니다. CSS 커스터마이징 스크롤바의 데모를 통해 우리는 디자인 팀으로부터 바이 인을 입수하고 이 중간 단계에 정착하여 더 큰 JavaScript 솔루션을 피할 수 있었습니다.


데모 검토 

재고 스크롤바 동작

CSS 전용, 모든 스크롤바 스타일

CSS + JavaScript, 스타일이 방해되는 스크롤 막대 만