회사 이미지 검색 솔루션 중에 비슷한 상품을 추천해 주는 기능을 카페24 앱으로 만든 것이 있다. 상품 상세 페이지에 상품 목록 형식으로 들어가는데 상당히 많은 고객이 롤링 형태로 더 많은 상품을 보여줄 수는 없느냐는 요청을 해왔다. 사실 나는 뭔가 더 보여주려면 그만큼 화면에 공간을 할애하라는 주의이지만 더이상 개똥철학 만을 주장할 수는 없는 정도가 되어서 기능 추가를 하기로 했다.

롤링이라고 하면 정해진 시간 간격에 자동으로 움직이는 형태를 말 한 것일테고 모바일 언급도 있었던 걸로 봐서 좌우 스와이프 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는 안된다.