| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 |
- css rule
- 파이썬
- python
- to do list
- javascript
- 자바스크립트
- CSS애니메이션
- 웹스크래핑
- 뉴스수집
- 코딩가이드
- google style guide
- 투두리스트
- 구글스타일가이드
- 자기개발
- Vue.js
- @keyframes
- 스타일가이드
- 코딩컨밴션
- vuejs입문
- 로딩UI
- 구글CSS
- vue-cli
- 프레임워크
- 개발회고
- CSS로딩
- css규칙
- vueJS
- 코딩규칙
- MariaDB
- html제거
- Today
- Total
목록2019/09/04 (2)
코드공부방
스크롤 감지하여 고정메뉴 노출/비노출 처리 이벤트 상단, 하단에 모두 고정 메뉴나 콘텐츠가 있는 경우 모바일 환경에서는 콘텐츠를 볼 수 있는 영역이 좁아 부담스러울 수 있다. 따라서 사용자가 스크롤을 올리는지, 내리는지 체크하여 하단고정메뉴를 노출 또는 비노출 처리하여 콘텐츠를 볼 수 있는 영역을 유동적으로 넓힐 수 있다. Scroll check Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem mollitia accusamus sequi ipsa, rerum nam laboriosam, ipsam aperiam deleniti beatae expedita id quisquam veritatis corporis, voluptates ..
무한스크롤 (Infinity Scroll) UI 구현하기 쇼핑몰이나 상품 또는 게시글 목록에서 갯수가 많아지면 자연스럽게 페이징(Page nate, pagenation 등으로도 불리운다) 처리를 하게 된다. 근데 PC에서 쓰이는 페이징 UI를 모바일로 그대로 가져올 경우, 원하는 페이지로 넘어가기 위하여 숫자버튼을 눌러야 하는데 매우 불편하다. 때문에 모바일에서는 보통 상품 목록을 화면에 노출시킬때 Infinity Scroll UI / 무한스크롤 UI를 사용한다. 모든 상품을 한번에 불러올 경우 페이지 로딩 속도에도 문제가 생기기 때문에 최초 특정 갯수 만큼만 노출 로드시킨 뒤, 사용자가 스크롤을 하면서 최초 노출시킨 목록을 다 보게되면 또 특정 갯수만큼의 목록을 로드하여 사용자로하여금 별도의 행동없이 ..