made with vue.js

#Animation #Utilities #UI utility #Menu
icon-eye-dark Created with Sketch. 752

Vue Use Active Scroll

Highlight Menu / Sidebar

Visit Site

Description

Highlight Menu / Sidebar

"The Intersection Observer is a great API. But it may not be the one-size-fits-all solution to highlight nav/sidebar links. Most likely because you want to:

  • Highlight any clicked link even if it will never intersect
  • Always highlight first/last link once reached the top/bottom of the page
  • Get consistent results regardless of scroll speed
  • Immediately highlight links on click/hash navigation if smooth scrolling is enabled
  • Avoid unnatural highlighting with custom easings or smooth scrolling

Vue Use Active Scroll implements a custom scroll observer which automatically adapts to any type of scroll behavior and trigger and always returns the "correct" active target."

Creator

Simone Mastromattei

Social Media Links

Related Projects


v-wave Material Ripple Directive
#Animation #UI utility
icon-eye-dark Created with Sketch. 1.497
VueMS Transform a Monolith to Microservices
#Utilities
icon-eye-dark Created with Sketch. 3.121
Sentry for Vue Vue Application Monitoring
💚 Sponsored by Friends
We’re hosting on Digital Ocean! 💙 Try it today and get a free $100 credit.
try now
Pinia Undo Undo/Redo Plugin for Pinia
#Utilities #State management
icon-eye-dark Created with Sketch. 847
v-offline Online / Offline Detection
#Utilities
icon-eye-dark Created with Sketch. 5.693
View all Projects
COMMUNITY SPONSORS
Bryntum offers a modern web component suite including a grid, scheduler, calendar & more – all integrating with Vue.js Learn more Vue application monitoring by Sentry provides actionable insights to resolve performance bottlenecks and errors Learn more The JSCharting data visualization library includes 150+ advanced chart types that you can seamlessly use in your Vue apps Learn more