본문 바로가기

scroll4

[Vue] input type=number 엘리먼트에서 스크롤로 값 변경 막기

개요 스크롤로 값이 변경되는 현상을 발견하였다. 해결방법 귀한거디.... scroll 휠 2022. 11. 21.

[Nuxt.js] 무한 스크롤 구현한 사례

개요 Nuxt.js에서 무한 스크롤을 구현한 방법을 소개한다. 무한 스크롤 구현에 사용한 기술은 Javascript에 new IntersectionObserver 이다. 이 객체는 html element를 지정할 수 있으며, viewport에 얼만큼 노출되느냐를 옵션으로 설정해서 사용자가 지정한 함수를 호출할 수 있게 해준다. 컴포넌트 구조 components +- List.vue 👈 목록 데이터를 패치해서 store에 저장함 +- ListItem.vue 👈 observe 객체가 있음. 함수가 첫 호출됨 pages +- index.vue 👈 첫 번째 페이지 목록 데이터를 패치받음 pages/index.vue 첫번째 페이지네이션 page=1페이지 목록 데이터를 받아온다. template script imp.. 2022. 6. 1.

[Nuxt.js & Vue.js] 스크롤 위치 유지하는 방법

개요 무한 스크롤 구현 후, 사용자가 목록을 쭉 내리다가 특정 목록 아이템에 상세 보기 페이지로 진입 후, '뒤로가기'를 했을 때, 사용자가 보던 스크롤 위치를 그대로 보여주기 위한 기능이 필요했다. 스크롤 위치를 보존하는 방법을 소개한다. 컴포넌트 구조 components +- List.vue 👈 destroyed 훅에서 store에 스크롤 위치(scrollY) 저장 +- ListItem.vue pages +- index.vue 👈 저장된 스크롤 위치로 mounted 훅에서 이동 pages/index.vue index.vue가 렌더링된 후에 스크롤 위치 이동 export default { name: 'something', mounted() { setTimeout(() => { window.scrollT.. 2022. 6. 1.

[CSS] 블록에 scroll주는 법 프론트 개발자라면 반드시 알아야 하는

height: 100px; overflow: scroll; 2021. 4. 15.

티스토리툴바