Front/HTML+CSS 2020. 2. 23. 14:12 검수 중 스크롤을 없애달라는 요청이 있었다. (스크롤이 뭐 어때서..) 1. 가로 스크롤 없애기 <body style="overflow-x:hidden"></body> 2. 세로 스크롤 없애기 <body style="overflow-y:hidden"></body>
가로 스크롤이나 세로 스크롤 영역이 생기면 자동으로 스크롤바가 생기게 된다.
세로 스크롤은 보통 놔두는 편이지만 가로 스크롤이 가능한 네비게이션 바를 만들 때는 스크롤바가 없는 게 자연스러워 없애려고 한다.
스크롤바를 없애려면 스크롤바가 생기는 부분에 브라우저 별로 스크롤바를 없애주는 css를 추가해주면 된다.
코드 출처는 다음 글 이다.
아래와 같이 코드를 사용하면 IE, Edge, Firefox, Chrome, Safari, Opera 등의 브라우저에서 스크롤바를 없애도록 대응할 수 있다.
코드
.no-scroll { -ms-overflow-style: none; /* IE, Edge */ scrollbar-width: none; /* Firefox */ } .no-scroll::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ }
dev | 2020-02-28
롤링이라고 하면 정해진 시간 간격에 자동으로 움직이는 형태를 말 한 것일테고 모바일 언급도 있었던 걸로 봐서 좌우 스와이프 UI도 염두에 두고 있었을 것이다. 뭔가를 더 보여주는 UI는 다들 비슷해 보이지만 세세한 부분을 보면 매우 다양한 것을 알 수 있다. 페이지가 순환이 되는지, 순환의 방향은 어느쪽인지, 항목 스냅이 되는지, 스냅의 기준은 페이지인지 항목인지, 종단 속도가 플리킹 속도의 영향을 받는지, 네비게이션 버튼이 있는지, 현재 페이지를 표기해 주는지 등 이것 저것 참고하고 고민하다가 그냥 OS에서 제공하는 스크롤을 사용하면 어떨까 하는 생각이 들었다.
사실 뭔가를 더 보여주는 전통적인 UI는 스크롤바 였다. 예전에는 아이프레임을 썼고 CSS를 사용하면서 부터는 HTML 요소에 스크롤을 만들어서 사용해 왔다. 움직임도 OS에서 기본적으로 제공하기 때문에 자바스크립트로 만들었을 때 보다 사용자 입장에서 더 자연스러울 것이다. 그래서 끄적이던 스크립트를 다 지우고 overflow: auto 만 추가해 보았다.
모바일에서 터치로도 아주 자연스럽고 트랙패드, 휠마우스 등으로도 잘 작동했다. 하지만 문제는 가로 스크롤 바가 나온다는 것이다. 이를 용인해줄 클라이언트는 없을 것이기 때문에 left나 transition대신 scrollLeft를 사용해서 최대한 스크롤 기능을 살리는 쪽으로 구현하기로 했다.
서론이 너무 길었지만 스크롤 바를 감출때는 스크롤 기능을 유지할 것인지 아닌지에 따라서 방법이 다르다. 스크롤이 안되게 하는 방법은 대부분 알다 시피 overflow: hidden을 사용하면 된다. 스크롤 기능은 그대로 두고 스크롤 바만 없애려면 아래와 같이 브라우저 별로 각각 선언을 해주면 된다.
ul { scrollbar-width: none; -ms-overflow-style: none; } ul::-webkit-scrollbar { display: none; }추가로 OS의 관성 스크롤을 유지하려면 scroll-behavior: smooth를 추가하면 된다. 그러면 element.scrollLeft 값만 바꾸는 식으로 만들어도 자연스럽게 애니메이션이 된다. IE는 안된다.
Westagram 스크롤 기능은 살리고 스크롤바는 없애기
스크롤 기능은 존재하되, 스크롤바가 보이지 않는 css 효과에 대해 알아봅시다!
💡먼저, 스크롤 기능을 추가하려면?
<div class="box" style="width: 200px; height: 100px; background: black; color: white; overflow-y: scroll;"> 안녕하세요.<br> 어쩌다 이곳에 오셨나요? <br> 스크롤바 기능을 구현하려고 하시나요?<br> 그런데 스크롤바는 없애고 싶은가요?<br> 얼른 알려드리겠습니다. <br> 조금만 밑으로 내려주세요.<br> 다왔습니다.<br> 이 스크롤 바가 아니고 전체 스크롤바를 내려주세요.<br> 😎<br> </div> 안녕하세요.
어쩌다 이곳에 오셨나요?
스크롤바 기능을 구현하려고 하시나요?
그런데 스크롤바는 없애고 싶은가요?
얼른 알려드리겠습니다.
조금만 밑으로 내려주세요.
다왔습니다.
이 스크롤 바가 아니고 전체 스크롤바를 내려주세요.
😎
🙋♀️ 전체 스크롤 바를 없애고 싶어요!
body{ -ms-overflow-style: none; } ::-webkit-scrollbar { display: none; }🙋♂️ 특정 부분 스크롤바를 없애고 싶어요!
.box{ -ms-overflow-style: none; } .box::-webkit-scrollbar{ display:none; }* 참고 사항
1. overflow: visible;
기본값. 사이즈를 넘 칠경 우 글이 상자 밖으로 보임.
2. overflow: hidden;
사이즈를 넘 칠경 우 글이 잘림.
3. overflow: scroll;
사이즈를 넘칠경우 가로 세로 모두 스크롤이 추가.
4. overflow: auto;
양에 따라 스크롤이 자동으로 추가될지 결정.
5. overflow-x, overflow-y
가로, 세로 overflow를 각각 제어하고자 한다면 overflow-x와 overflow-y를 사용.
출처: //wooaoe.tistory.com/49 [개발개발 울었다]