엣지 스크롤바 숨기기 - esji seukeulolba sumgigi

참고

문제상황

회사 장바구니를 고도화하는 도중 스크롤이 스크롤이 매우 거슬렸다.

기능은 남겨두되 보이지 않게 하고 싶었다.

해결

.target {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.target::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

스크롤바를 숨기고 싶은 영역을 지정하고(위에서는 .target) 위와 같이 적어준다.

728x90

300x250

::-webkit-scrollbar {
    display: none;
}

/* Chrome, Safari, Opera 스크롤바 숨기기 */
.example::-webkit-scrollbar {
  display: none;
}

/* IE, Edge 스크롤바 숨기기 */
.example {
  -ms-overflow-style: none;
}

overflow-y: hidden; /* 세로 스크롤바 숨기기*/
overflow-x: hidden; /* 가로 스크롤바 숨기기 */

출처 : https://www.codegrepper.com/code-examples/css/how+to+remove+scrollbar+in+css

728x90

반응형

공유하기

게시글 관리

저작자표시 비영리 변경금지

'Front-end > CSS' 카테고리의 다른 글

가로 스크롤이나 세로 스크롤 영역이 생기면 자동으로 스크롤바가 생기게 된다.

세로 스크롤은 보통 놔두는 편이지만 가로 스크롤이 가능한 네비게이션 바를 만들 때는 스크롤바가 없는 게 자연스러워 없애려고 한다.

스크롤바를 없애려면 스크롤바가 생기는 부분에 브라우저 별로 스크롤바를 없애주는 css를 추가해주면 된다.

코드 출처는 다음 글 이다.

아래와 같이 코드를 사용하면 IE, Edge, Firefox, Chrome, Safari, Opera 등의 브라우저에서 스크롤바를 없애도록 대응할 수 있다.

코드

Microsoft는 Edge 브라우저의 기존 스크롤 막대를 오버레이 스크롤 막대로 교체할 준비를 하고 있습니다. 후자는 더 현대적으로 보이며 웹 사이트를 탐색하여 시간을 보낼 때 보기를 방해하지 않습니다. Microsoft Edge 사용자인 경우 일반 롤아웃 전에 오버레이 스크롤 막대를 가져오는 방법은 다음과 같습니다.

요약

Microsoft Edge(2021)에서 오버레이 스크롤 막대 가져오기

Microsoft Edge 안정 버전에서 오버레이 스크롤 막대 가져오기

Microsoft Edge에서 기능 플래그를 사용하여 오버레이 스크롤 막대 가져오기

Microsoft Edge에서 최신 스크롤 막대를 경험하십시오.

Microsoft Edge(2021)에서 오버레이 스크롤 막대 가져오기

특히, 안정적인 채널에서도 오버레이 스크롤바를 얻을 수 있습니다. Edge 93 이상 버전을 사용하는 한. 해결 방법은 첫 번째 지적했다 팁스터 u/Leopeva64-2의 Reddit에서. Edge 안정 버전 93.0.961.38에서 아래에서 테스트했습니다. 내부자 채널 빌드에 있는 경우 Edge 플래그를 통해 오버레이 스크롤바를 활성화하는 다른 방법도 자세히 설명했습니다. 그 이상으로 시작하겠습니다!

Microsoft Edge 안정 버전에서 오버레이 스크롤 막대 가져오기

안정적인 채널에서 Edge 93 이상 버전을 사용 중인 경우 Edge 바로 가기에 매개 변수를 추가하여 기능을 얻을 수 있습니다. 방법은 다음과 같습니다.

1. Edge의 바로 가기를 마우스 오른쪽 버튼으로 클릭하고 ‘속성’을 선택합니다.. 속성을 여는 단축키를 선택한 후 Windows 11 키보드 단축키 ‘Alt+Enter’를 사용할 수도 있습니다.

2. 가장자리 속성의 ‘바로 가기’ 탭에서 ‘대상’ 필드를 클릭하고 다음 텍스트를 붙여넣습니다. 경로의 끝에서:

--enable-features=OverlayScrollbar,OverlayScrollbarWinStyle,OverlayScrollbarWinStyleAnimation

3. ‘적용’을 클릭하고 대화 상자를 닫습니다. 다음에 이 바로 가기를 사용하여 브라우저를 열면 오버레이 스크롤 막대가 표시됩니다. 오버레이 스크롤바가 기존의 두툼한 스크롤바와 어떻게 다른지 알아보려면 아래 이미지 갤러리를 확인하세요.

• 
  Edge의 오래된 스크롤바
• 
  Edge의 새로운 오버레이 스크롤바

4. 오버레이 스크롤바가 작동하는 모습을 보고 싶다면 아래 GIF에서 확인하세요. 보시다시피 스크롤 막대는 이전 영구 스크롤 막대와 달리 마우스를 가져갈 때까지 탐색 경험을 방해하지 않습니다.

Microsoft Edge에서 기능 플래그를 사용하여 오버레이 스크롤 막대 가져오기

Insider 채널에서 Microsoft Edge Beta, Dev 또는 Canary 빌드를 사용하는 경우 기능 플래그를 사용하여 오버레이 스크롤 막대를 활성화할 수 있습니다. 방법은 다음과 같습니다.

1. PC에서 Edge 브라우저를 열고 edge://flags로 이동한 다음 ‘Windows 스타일 오버레이 스크롤바’ 검색. 언제나처럼 Edge의 주소 표시줄에 플래그의 다음 직접 링크를 붙여넣으면 빠르게 액세스할 수 있습니다.

edge://flags/#edge-overlay-scrollbars-win-style

2. 옆에 있는 드롭다운 메뉴에서 플래그를 ‘사용’으로 설정하고 브라우저를 다시 시작합니다.

3. 브라우저를 다시 시작하면 Microsoft Edge에 오버레이 스크롤바가 보이기 시작합니다.

Microsoft Edge에서 최신 스크롤 막대를 경험하십시오.

이상으로 Edge에서 오버레이 스크롤바를 활성화하는 방법에 대한 빠른 가이드를 마치겠습니다. 시작하는 단계는 간단하며 더 이상 Edge의 기본 흰색 스크롤 막대를 용인할 필요가 없습니다. 이것이 도움이 되었다면 최고의 Edge 플래그와 Windows 11의 기본 브라우저를 전문가처럼 사용하기 위한 최고의 Edge 팁 및 요령에 대한 기사를 확인하는 것을 잊지 마십시오.