The "scroll" event in JavaScript | window.onscroll
ฝัง
- เผยแพร่เมื่อ 25 ส.ค. 2024
- By making use of the "scroll" event in JavaScript, you are able to react to when the users of your web page scroll down or up. Learn more in this video tutorial.
In this video I take you through the usage of the "scroll" event on the Window object. This allows us to listen for when the user scrolls up or down the page - we then implement a function that displays a message box when the user has reached the bottom of the page.
Support me on Patreon:
/ dcode - with enough funding I plan to develop a website of some sort with a new developer experience!
For your reference, check this out:
developer.mozi...
Follow me on Twitter @dcode!
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #javascript #webdev
The simplistic explanation I have ever seen. Please keep bringing more videos like this for us. Thanks dcode
Thank you!! I was trying to figure out how to get the total height of the page when its scrollable and then I stumble upon your video! This made me progress so much!
No problem at all! Glad it could help you 😁
thank you for this video. It was very helpful for me. Short and to the point, this is what I needed
Thank you so much for this video. I was searching for answers on how to add active class to a link in navbar on scroll and was getting JQuery code everywhere. After watching this video I was able to do that in one shot.
Thanks a lot. All your tutorials are neat, precise and useful. Congrats, sir
No probs and thank you :)
When it comes to JavaScript, Dom is the guy. These tutorials are so gooddddddd. Thank you so much!!!!
No worries and thank you!
Thanks man!! your video helped me on my front-end test
No worries mate good luck!
Thank you so much, first normal video on this topic!
Glad it was helpful!
You have done it with very simple code .. great work sir ..thabks a lot
No probs mate! Thanks
Thank you friend, your video was very helpful, greetings from Hidalgo, Mexico
Thank you! I needed to know how to detect the scroll and landed here :) second video I land on your channel today on differents topics
No worries!!
Been looking for a simple and concise way to understand this as i'm most recently getting into events. Really helpful and clearly explained. I was able to create my own styling and animation by adding a class from the first parts of the code you explained. Much appreciated! Was pulling my hair out for a bit over this lol
That's great to hear mate!
You are a real live saver... Thank you!
Very informative video. Thank you! Its over many important things.
No worries mate
Awesome ! I was looking for this, thanks a lot
No worries mate!
So ..good explanation :)
No worries mate!!
You just saved me a day :-)
Awesome explanation, Thank you
Thank you very very muhhh... after very muchh struggling I found my perfect solution....
No worries mate :)
@@dcode-software yhh
@@dcode-software thanks bro.i love your video
Thank you, I wanted to start learning javascript scrolling affects and this really helps, great work!
Thanks a lot for this
lovely video.....nicely explained...neat example used..thanks
No problem at all mate!
Thank you.This was so usefull.Keep going.
Thanks mate helped me a lot today! earned your subscription
You're welcome mate
Very nice and helpful. Thank you
No problem! Thanks
@@dcode-software +1 subscriber from me
You're a lifesaver man!
No worries man!
спасибо большое, всё понятно разложил по полочкам.
Nice explanation
Very cool tutorial, exactly what i needed :)
Glad you liked it!
Good one
I love your video man.Can you make tutorial pure js custom scrollbar?
What should I do, If I want to check Before reaching the bottom of around 10px before reaching the bottom
Thanks bro :)
In germany we say: vallah das video is zu geil
спасибо !! коротко и ясно ! помогли !
thx for this mazing explain
Thank you!
All good!
GOOD VIDEO
thank you your awesome!
Cheers mate you too
thanks, it helped a lot. :)
thank you a lot sir
you are amazing
No probs 😁
Thank u my hero.
good job !
You're welcome
Very helpfull, Thankyou very much...
No worries mate
helped me alot
Thanks alot sir
No problem 😃👍👍
did as shown, not a single instance of event fired while scrolling. testing in chrome 88
Informative vedio
JavaScript for Background change of box when scroll down
How can i scroll to the id that id suppose to be center of the window... Could you please send me code for that using JavaScript
its great video
Glad you liked it!
thank you so much
how can I do this for a sidebar scrollbar instead of a window scrollbar?
const scrolled = document.getElementById("nav_menu-2").scrollY doesnt do anything
Super helpfull!!! but I have some uestions... what if I want to set that function to a spesific part of the scroll insted the bottom? pls!!
My guess is you could divide the total possible scroll by whatever you want and then match it to that. IE:
while [currently scrolled amount] < [possible scroll amount] / 2, do whatever
tks u so much
No probs.
HI,BRO
WHEN YOU ARE SCROLLING THAT ONE ...
WHAT IS THAT 157 ?
Hey, guys! He, y'all!
My name is... DOM - Document Object Model
Yep that's me
My scroll event won't fire for anything. So frustrated!
ironically am working on a task from udacity nano degree which has the same lorem ipsum quote written in
Is there a way to stop the scroll event? I made a program where I run the scroll event only when a certain element is in view, if the element is not in view I don't need that event to keep running, but I can't seem to find a way to stop it.
Thanks for the explanation! How can i make one that shows the alert at 50% of the scroll?
Use an if statement.
If ( scrollable === scrolled /2){
Command
}
I wanted to make something where their would be 3 circle and each time you scroll circle 1 turns black when you scroll down more circle 2 turns black and on and on.
Hello! How can I set the scroll left by using the normal scroll down?
very good. ;)
Thanks! 😃
Is it possible scrollbar on for only using pointer event
Hi Dom. I have a challenge and maybe you could help. I have an image which looks like a pc screen. Underneath this i want to have an that is scrollable. Using zindex block the scroll. Can you think of a way to capture the scroll and pass it down to the (beneath the image)
Thanks for the video! I'm trying to create a parallax effect for an image element. So when the user scrolls down or up, the element transform:translate(0,1px); accordingly, whether it's going up or down. Do you know how to do that?
I wish to do the same .. could you do it?except the fact I wish to scale the image
Hey, how about navbar? show navbar if reach the 100vh of page? Sorry, I'm beginner. :)
What font you use in the page ?
What do you mean when you say the height of the entire document?
Basically the entire content, all the text, images etc
Great tutorial, how to make left column fixed and right column scrollable? check apple headphone landing page. Please make a video on this
3:05 #kalnotes
What theme is this, dcode
Hey, it's Roboto Mono
@@dcode-software =)) i thougth my comment not gonna get reply due to "2 year ago" video. Thanks
All g mate
❤
so
You shouldn't use the scroll event this way.. Highly unrecommended.
so what did this guy showed us ? waste of time
Thank you!