005 - 특정 영역에서만 동작하는 스크롤 만들기

이번에는 특정 영역에서만 동작하는 스크롤을 만드는 예제 입니다.

 

가로로 스크롤 되는 것과

 

세로로 스크롤 되는 예제 입니다.

 

html5 CSS 에는 max-width, max-height 가 존재 합니다.

 

설정 한 크기를 넘어가는 내용을 담게 되면 스크롤이 생기게 하는 예제 입니다.

 

가로 스크롤을 만들때는 

 

max-width 와 overflow-x 라는 속성을 활용하고

 

세로 스크롤을 만들때는

 

max-height 와 overflow-y 라는 속성을 활용하면 됩니다.

 

이미지를 넣거나 해보면 더 쉽게 동작을 확인할 수 있습니다.

 

See the Pen 005 - 특정 영역에서만 동작하는 스크롤 만들기 by Keun (@kwyuk) on CodePen.