목록스크롤 (5)

FEDev Story

탑 스크롤 애니메이션 구현하기

https://blogpack.tistory.com/690 탑 스크롤 애니메이션 구현하기 세로로 긴 컨텐츠를 웹에 표시하거나 모바일 기기에서 긴 스크롤 화면을 스와이프로 스크롤 하는 경우 화면 스크롤의 번거로움을 피하기 위해 화면 최상단으로 이동할 수 있는 고정 링크를 제 blogpack.tistory.com
Web.Dev 2021. 9. 9. 15:48
특정 엘리먼트로 스크롤을 천천히 이동시키기. scrollIntoView()

특정 엘리먼트로 스크롤을 천천히 이동시키는 방법, scrollIntoView smooth 웹사이트의 특정 영역으로 스크롤을 이동시키는 방법 중 하나인 scrollIntoView()에 대하여 알아봅니다.! [잠깐] 스크롤을 특정 엘리먼트로 이동시키는 방법은 뭐가 있을까?원하는 위치로 스크롤을 webisfree.com
Web.Dev 2021. 8. 27. 14:46
스크롤 체이닝 현상 막는 법

https://webruden.tistory.com/277 overscroll-behavior 속성을 활용해서 스크롤 체이닝 현상 막는 방법 웹에서 스크롤 작업을 하다보면 항상 마주치는 문제가 있습니다. 바로 스크롤 체이닝(scroll chaining) 입니다. 스크롤 체이닝이라고 표현하면 해당 이슈가 뭔지 모르실 수 있으니 아래 간단한 예제 webruden.tistory.com
Web.Dev 2021. 8. 26. 20:06
scroll event 최적화 함수

const toFitScroll = (cb) => { let tick = false return function trigger () { if (tick) { return } tick = true return requestAnimationFrame(function task() { tick = false return cb() }) } } const onScroll = () => { } window.addEventListener('scroll', toFitScroll(onScroll), { passive : true }) https://jbee.io/web/optimize-scroll-event/ 스크롤 이벤트 최적화 ⚠ 이 포스팅은 자바스크립트의 비동기 처리에 대한 이해를 기반으로 작성되었습니다. 이 포스팅..
Javascript/★★ 2021. 3. 31. 16:00
[스크랩] 스크롤을 감지하여 사이트의 헤더를 보이거나 숨기기

앞서 유사한 기능의 플러그인인 Headroom.js 에 대하여 살펴보았는데, 구형 IE에 대한 크로스브라우징에 어려움을 겪을 수 있습니다. 이에 원리는 유사하나 대상 요소가 명확하게 한정된 요소일때 간단히 구현할 수 있는 스니펫을 소개합니다.DOC Hide header on scroll down, show on scroll upDEMO Hide Header on on scroll down고정된 헤더(네비게이션) 사용 불편함 인지많은 웹사이트에서 네비게이션 탐색에 도움을 주기위해 상단의 헤더(네비게이션을 포함한)를 CSS의 포지셔닝을 사용해 position: fixed 와 같이 고정해 두곤 한다. 헤더 부분은 대부분 상호(브랜드)를 포함하고 네비게이션을 포함하기에 고정된 헤더에 높이가 긴 콘텐츠를 포함하고..
Web.Dev 2019. 1. 10. 16:20
Prev 1 Next