Dynamic Scroll States with Intersection Observer + Vue
HTML-код
- Опубликовано: 3 апр 2022
- Learn how websites make dynamic table of contents!
✅ FREE VUE 3 CHEATSHEET WITH ESSENTIAL CODE SNIPPETS
learnvue.co/vue-3-essentials-...
follow me on twitter:
/ mattmaribojoc
🚨 Like quick Vue lessons like these? Check out 800+ lessons over on Vue School - go.learnvue.co/vueschool
Music by Lukrembo
I observed your video, sir. And it intersected with me very well. Job well done!
haha thank you :)
This scroll style is awesome! Great Video, thanks!!
Dude, you content so good! Keep it up! I’ve showed my team at work your channel and even the seniors love you haha
legend!! thanks for the kind words
These videos are great. I watch for them every week. On your website, you have a green bar that indicates how far you have scrolled down the page. Can you do a video on that? Thanks!
great idea - i had a ton of fun implementing that feature so i'd be happy to add that to the backlog :)
@@LearnVue beautiful!
Need more videos like this. Thank you
You have my respect. I recently was looking for a way, not until now, how to change my navbar background color when getting to a particular section of a page, and reverting it back when it crosses that section or goes back up. This is beautiful.
appreciate it! glad i was able to help
Amazing! A great use case for this is on a chat to send feedback to the api that the user had read a message.
Ooh yeah definitely that's a great one.
Love your videos. Keep it up man
Super helpful, thanks 🙏👍
Love your videos🎥
Can you make a video about vue 3 + astro ?, that seems to be even better than just a plain vue 3 spa + vite
I've seen sometimes people use onDestroy to disconnect the observer, is it necesary?
I think it is. Isn't it called onUnmount?
Great video
This is awesome
Thank you for this
👍
glad you like it :)
@@LearnVue hi, can you do another video about rendering items when instersected in order to minimize render elements to dom when first load web app
Love your videos
love your comment
Amazing!
i think this is good for my chat application.. I'm thinking about how can i implement a seen messages feature, maybe i can use this. Thanks master 🙏
I’m sure it’s not recommended, in Vue, to query to the document directly with
query selector?
how to adjust adjust the intersection observer position and threshold?
why does using document.querySelectorAll preferred over using ref? Is this only matter of preference?
Is this accessible for users that use the screen reader?
In the view docs, not only does the active border gets changed, there's also the hash which is updated. How does one accomplish that? There's also a feature whereby once you scroll out of the container containing the id section, the hash disappears. It's a very interesting feature that I'm trying to replicate.
this is a built-in vitepress feature (which uses scroll events instead of intersection observers)
you can recreate this with intersection observers with Vue Router's replace method to add the hash onto the current route
What if the paragraph is much longer let's say longer than the client view height. Then you approach doesn't really work because when you scroll to the section below and then start scrolling up through the very long paragraph (meaning the header is not visible) your TOC still highlights the link to section below even though user came back to read previous very long paragraph. How would we go about this? I have this problem in my app and I cannot get it to work like it works on MDN, tailwind docs or any good documentation. Any tips??
Have you found a solution for this?
The logic is flawed here. As you can see, the first and second section is never updated, because they are always in the viewport. What you need to do is only change the id when the header comes into contact with another element at the top of the page (an invisible div or something). That way, the current section will only change when the old section is mostly out of view.
EDIT: Turns out you cant have the size of the invisible div set to anything you want since you want the target element's root to be a parent. So, you should use the rootMargin option and add a negative margin that will effectively shrink the intersection area. Say -90% bottom margin, which will leave a 10% area of the vh at the top. (set the height of the root div to 100vh)
hi great video, can you implement this using vue components? hope you recognize my comment.
In your template you can use ref inside of your component like , and in your script setup declare const myComponent = ref(null) (for typescript you can use ref(null), then you do observer.observe(myComponent.value)) or check the VUEUSE useInteresectionObserver, the same principal
it is not working after changing link and come back to the page again how can we fix it. any idea
i can't be 100% sure, but my thought is that the component is not being mounted on the second load. try playing around with `key` or different lifecycle hooks.
@@LearnVueactually I am using Nuxt 3 so, I found out that using the DOM directly is not a good idea, instead using template ref. it is the way of Vue.