Often, it's easy to lose your place on a webpage when scrolling - especially text-heavy pages without obtrusive anchors. Generally you relocate your position quickly, but it's an unnecessary annoyance. Smooth-scrolling homogenizes everything while moving, often resulting in eye flickering/strain. Non smooth-scrolling prevents this, but makes large jumps which can throw off focus.
Animate a visual anchor to help positional tracking
- Import
scroll-mark.cssandscroll-mark.jsto your project - Reference in your html
- Will automatically act on
<body>if it overflows in y - Add
.scroll-markto other scroll containers if desired - Modify variables and styles if needed
./scroll-mark.js
scrollm.config.delayTime between scroll events. Under will be 1 continuous event. Over will end first, and start freshscrollm.config.offsetBeginning height for scroll mark. Adjust if you want it higher/lower (relative to scroll direction)
- Console notification if class added to the wrong element
- Console notification if not automatically acting on
<body> - BUG: flicks to wrong side when switching scroll target
- Test with different styling cases
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent