스크립트 없이 스크롤 하기 (모바일만)

오늘은 스크립트 없이 스크롤 하는 방법에 대해 알아보려고 한다.

위와 같이 스크립트를 사용하지 않고, 컨텐츠를 제어할 수 있는 css 이다.

모바일만 동작한다고 한 이유는 간단하게 PC에서는 안되기 때문이다.

먼저 마크업을 보자

그냥 뭐 일반적인 리스트이다. 

 예제를 위해 만들었기 때문에, 클래스도 없고. 걍 막했다.

css다.

main은 하위 div등을 숨기면서 감싸는 역할이고,

div는 실제로 스크롤 없이 동작하게 하려는 오버플로우 스크롤링 이 들어있다.

ul은 리스트의 토탈 넓이,

li는 일반적인 리스트아이템 같이 작업해주면 된다.

 

이렇게 할경우 스크립트를 사용하지 않고, 스크롤 효과를 낼 수 있다.