The "scroll" event in JavaScript | window.onscroll

แชร์
ฝัง
  • เผยแพร่เมื่อ 3 ม.ค. 2025

ความคิดเห็น • 116

  • @ajminpradhan1112
    @ajminpradhan1112 4 ปีที่แล้ว +13

    The simplistic explanation I have ever seen. Please keep bringing more videos like this for us. Thanks dcode

  • @hyfytale9577
    @hyfytale9577 5 ปีที่แล้ว +8

    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!

    • @dcode-software
      @dcode-software  5 ปีที่แล้ว +2

      No problem at all! Glad it could help you 😁

  • @aryanyadav3926
    @aryanyadav3926 2 ปีที่แล้ว +1

    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.

  • @skitzhills
    @skitzhills 4 ปีที่แล้ว +1

    When it comes to JavaScript, Dom is the guy. These tutorials are so gooddddddd. Thank you so much!!!!

  • @Paulina-sc1xd
    @Paulina-sc1xd 4 หลายเดือนก่อน

    thank you for this video. It was very helpful for me. Short and to the point, this is what I needed

  • @Duka093
    @Duka093 2 ปีที่แล้ว

    Thank you so much, first normal video on this topic!

  • @angladephil
    @angladephil 6 ปีที่แล้ว +4

    Thanks a lot. All your tutorials are neat, precise and useful. Congrats, sir

  • @estengrove3350
    @estengrove3350 6 ปีที่แล้ว +3

    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

  • @jesusmelgoza2096
    @jesusmelgoza2096 2 ปีที่แล้ว

    Thank you friend, your video was very helpful, greetings from Hidalgo, Mexico

  • @udaysaiphanindra3138
    @udaysaiphanindra3138 6 ปีที่แล้ว +1

    You have done it with very simple code .. great work sir ..thabks a lot

  • @gabrielopeyemi1477
    @gabrielopeyemi1477 4 ปีที่แล้ว

    You are a real live saver... Thank you!

  • @stratavis
    @stratavis 5 ปีที่แล้ว +2

    Thanks man!! your video helped me on my front-end test

  • @kamisettylokesh3156
    @kamisettylokesh3156 ปีที่แล้ว

    Awesome explanation, Thank you

  • @AtillaRustemli
    @AtillaRustemli ปีที่แล้ว

    Thank you.This was so usefull.Keep going.

  • @ruman2494
    @ruman2494 4 ปีที่แล้ว +1

    Very informative video. Thank you! Its over many important things.

  • @atlas6234
    @atlas6234 3 ปีที่แล้ว

    Thank you, I wanted to start learning javascript scrolling affects and this really helps, great work!

  • @oneminutereview1385
    @oneminutereview1385 6 ปีที่แล้ว +1

    You're a lifesaver man!

  • @nickyuntd
    @nickyuntd 5 ปีที่แล้ว +4

    So ..good explanation :)

  • @joeyallard
    @joeyallard 4 ปีที่แล้ว +1

    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

  • @developedbyvarun
    @developedbyvarun 3 ปีที่แล้ว

    Thanks mate helped me a lot today! earned your subscription

  • @_MAHFUJHOSSAIN
    @_MAHFUJHOSSAIN 3 ปีที่แล้ว

    Nice explanation

  • @johnsmith-oy9kx
    @johnsmith-oy9kx 6 ปีที่แล้ว +2

    Awesome ! I was looking for this, thanks a lot

  • @razorintube
    @razorintube 5 ปีที่แล้ว +1

    lovely video.....nicely explained...neat example used..thanks

  • @YunusParvezKhan
    @YunusParvezKhan 4 ปีที่แล้ว +3

    Thank you very very muhhh... after very muchh struggling I found my perfect solution....

  • @timotijevicvladimir4870
    @timotijevicvladimir4870 2 ปีที่แล้ว

    You just saved me a day :-)

  • @Zukicha3
    @Zukicha3 6 ปีที่แล้ว +1

    Very nice and helpful. Thank you

    • @dcode-software
      @dcode-software  6 ปีที่แล้ว +1

      No problem! Thanks

    • @Zukicha3
      @Zukicha3 6 ปีที่แล้ว +1

      @@dcode-software +1 subscriber from me

  • @i_am_a_real_cat1443
    @i_am_a_real_cat1443 3 ปีที่แล้ว

    Very cool tutorial, exactly what i needed :)

  • @N5O1
    @N5O1 5 ปีที่แล้ว

    спасибо большое, всё понятно разложил по полочкам.

  • @NNNedlog
    @NNNedlog 3 ปีที่แล้ว

    Thanks a lot for this

  • @jeremiahcrampatanta322
    @jeremiahcrampatanta322 4 ปีที่แล้ว +1

    What should I do, If I want to check Before reaching the bottom of around 10px before reaching the bottom

  • @KrakersTv
    @KrakersTv 4 ปีที่แล้ว

    Thank u my hero.

  • @taco1960
    @taco1960 5 ปีที่แล้ว +1

    thank you your awesome!

  • @chamosxx
    @chamosxx 4 ปีที่แล้ว

    Very helpfull, Thankyou very much...

  • @deepanshukant392
    @deepanshukant392 4 ปีที่แล้ว

    thanks, it helped a lot. :)

  • @web2905
    @web2905 3 ปีที่แล้ว

    Thanks bro :)

  • @StarXmj
    @StarXmj 4 ปีที่แล้ว

    thx for this mazing explain

  • @TahirKabilov
    @TahirKabilov 4 ปีที่แล้ว +1

    Thank you!

  • @АлексейЛисовский-т8ю
    @АлексейЛисовский-т8ю 2 ปีที่แล้ว

    спасибо !! коротко и ясно ! помогли !

  • @bhasim4299
    @bhasim4299 2 ปีที่แล้ว

    In germany we say: vallah das video is zu geil

  • @miguelangelarriola5180
    @miguelangelarriola5180 5 ปีที่แล้ว +1

    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!!

    • @jordi0m
      @jordi0m 5 ปีที่แล้ว

      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

  • @mohamedmoataz8410
    @mohamedmoataz8410 5 ปีที่แล้ว +1

    thank you a lot sir
    you are amazing

  • @tsegayesusdilnesa412
    @tsegayesusdilnesa412 4 ปีที่แล้ว

    GOOD VIDEO

  • @movine2344
    @movine2344 6 ปีที่แล้ว +1

    I love your video man.Can you make tutorial pure js custom scrollbar?

  • @Wytibdtg
    @Wytibdtg 3 ปีที่แล้ว

    good job !

  • @simonli9328
    @simonli9328 3 ปีที่แล้ว

    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

  • @parahumanoid
    @parahumanoid 3 ปีที่แล้ว

    did as shown, not a single instance of event fired while scrolling. testing in chrome 88

  • @saileshkumar9529
    @saileshkumar9529 4 ปีที่แล้ว

    helped me alot

  • @kelseycaproon5336
    @kelseycaproon5336 2 ปีที่แล้ว

    Good one

  • @raghavendrayallamanda1268
    @raghavendrayallamanda1268 3 ปีที่แล้ว

    HI,BRO
    WHEN YOU ARE SCROLLING THAT ONE ...
    WHAT IS THAT 157 ?

  • @effiemero2989
    @effiemero2989 3 ปีที่แล้ว

    Hello! How can I set the scroll left by using the normal scroll down?

  • @0123rodolfo
    @0123rodolfo 3 ปีที่แล้ว +1

    Thanks for the explanation! How can i make one that shows the alert at 50% of the scroll?

    • @chidoziechukwugbo9746
      @chidoziechukwugbo9746 3 ปีที่แล้ว

      Use an if statement.
      If ( scrollable === scrolled /2){
      Command
      }

  • @amoknagrare2536
    @amoknagrare2536 4 ปีที่แล้ว

    Is it possible scrollbar on for only using pointer event

  • @houssembenothmen7250
    @houssembenothmen7250 5 ปีที่แล้ว +1

    Thanks alot sir

  • @guilhermenallin538
    @guilhermenallin538 4 ปีที่แล้ว

    What font you use in the page ?

  • @avinashgara1783
    @avinashgara1783 3 ปีที่แล้ว

    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

  • @luisalbertogarciaibarra9852
    @luisalbertogarciaibarra9852 4 ปีที่แล้ว

    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.

  • @Christobanistan
    @Christobanistan 3 ปีที่แล้ว

    My scroll event won't fire for anything. So frustrated!

  • @rasulakhundov500
    @rasulakhundov500 5 ปีที่แล้ว

    thank you so much

  • @mike_vahemoubayed8099
    @mike_vahemoubayed8099 4 ปีที่แล้ว

    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.

  • @gtasanandreasmods1785
    @gtasanandreasmods1785 4 ปีที่แล้ว +1

    Hey, guys! He, y'all!
    My name is... DOM - Document Object Model

  • @sehrishexplorer2156
    @sehrishexplorer2156 3 ปีที่แล้ว

    its great video

  • @emorock_2592
    @emorock_2592 4 ปีที่แล้ว

    Hey, how about navbar? show navbar if reach the 100vh of page? Sorry, I'm beginner. :)

  • @Konsinn
    @Konsinn 6 ปีที่แล้ว

    What do you mean when you say the height of the entire document?

    • @dcode-software
      @dcode-software  6 ปีที่แล้ว

      Basically the entire content, all the text, images etc

  • @mohamedabdelhalim9892
    @mohamedabdelhalim9892 4 ปีที่แล้ว

    ironically am working on a task from udacity nano degree which has the same lorem ipsum quote written in

  • @UsmanAli-cb2we
    @UsmanAli-cb2we 3 ปีที่แล้ว

    Informative vedio

  • @LatinoWebStudio
    @LatinoWebStudio 3 ปีที่แล้ว

    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?

    • @worldfromhome4033
      @worldfromhome4033 2 ปีที่แล้ว

      I wish to do the same .. could you do it?except the fact I wish to scale the image

  • @corndoggydogdog
    @corndoggydogdog 2 ปีที่แล้ว

    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)

  • @minercreepmc
    @minercreepmc 3 ปีที่แล้ว

    What theme is this, dcode

    • @dcode-software
      @dcode-software  3 ปีที่แล้ว +1

      Hey, it's Roboto Mono

    • @minercreepmc
      @minercreepmc 3 ปีที่แล้ว

      @@dcode-software =)) i thougth my comment not gonna get reply due to "2 year ago" video. Thanks

    • @dcode-software
      @dcode-software  3 ปีที่แล้ว

      All g mate

  • @fabiopaolucci8242
    @fabiopaolucci8242 3 ปีที่แล้ว

    very good. ;)

  • @SlientHeart
    @SlientHeart 4 ปีที่แล้ว +1

    tks u so much

  • @TariqKhan-yk9mg
    @TariqKhan-yk9mg 3 ปีที่แล้ว

    Great tutorial, how to make left column fixed and right column scrollable? check apple headphone landing page. Please make a video on this

  • @mdiqbal7168
    @mdiqbal7168 2 ปีที่แล้ว

    JavaScript for Background change of box when scroll down

  • @Visibletoanyone-k1y
    @Visibletoanyone-k1y 9 หลายเดือนก่อน

  • @wx10
    @wx10 2 ปีที่แล้ว

    3:05 #kalnotes

  • @llollercoaster
    @llollercoaster 4 ปีที่แล้ว

    You shouldn't use the scroll event this way.. Highly unrecommended.

  • @farcaone
    @farcaone 4 ปีที่แล้ว

    so

  • @karlo-o2z
    @karlo-o2z 3 ปีที่แล้ว

    so what did this guy showed us ? waste of time

  • @kasunjalitha2300
    @kasunjalitha2300 4 ปีที่แล้ว

    Thank you!