jQuery Tutorial - 38 - Scroll Video Lecture | Importance of jQuery in Website Development - IT & Software

hi this is Alex from PHP academy' dorg
with a video for the new boston in this
tutorial we're going to be looking at
the jquery scroll event handler we're
going to be creating a text area with
some text in and when the user Scrolls
we're first of all going to be feeding
back when they have actually scrolled
then we're going to be feeding back some
more dynamic information like the
position that they're currently at in
the scroll area so the first thing we
want to do is go ahead and create this
text area we're going to outline the
text area tags and we're going to give
this an ID of some underscored text and
this is how we're going to reference it
once we use jQuery to check this I'm
going to give it rows of seven and
columns of 25 I'm going to paste some
long text in this is just some Latin
text in here and we can go ahead to our
browser and preview this so inside of
our browser we now have this we can
scroll down that's important so we can
actually test the event handler
correctly we now want to create a file
which we're going to include in our page
down here with the scroll functionality
and the event handler in there so let's
go ahead and create a new text file and
I'm gonna save this as scroll j/s inside
my j/s folder okay so now that we've
done that we need to include that in our
page so let's go ahead and type script
type is equal to text forward slash
JavaScript the source is going to be
jeaious forward slash scroll J s and we
end the script there so now that we've
included scroll J s we can begin to
actually check when the event handler
well create the event handler when the
user Scrolls first thing we're going to
do though is create a div which is going
to relay some information back to us so
this is going to be a div ID of let's
just say some feedback now let's go over
to scroll j s and start to create the
event handler so we're going to
reference the some text text area and
the event handler is scroll now inside
of the parentheses we're going to create
a function which is going to be executed
when we actually start to scroll so
function and we create the block so we
create a function as normal with the
parentheses and a block here we bring
this down so we can start writing the
code inside of the block so our div is
called sum underscore feedback so what
we can simply do is say sum underscore
feedback dot HTML and inside of here we
can say something like you have scrolled
so now what's going to happen is when we
return to our browser and we start to
scroll we're gonna have the div display
that text that we've just typed in let's
go ahead and start scrolling okay so you
can see that the text has now appeared
just here and we have fed back to the
user when they've started to scroll now
what we're going to do is we're going to
use something slightly different to feed
back some more dynamic information I'm
going to create a variable called scroll
pause and that's going to be equal to
again the reference of some
texts but this time it's going to be dot
scroll top now this scroll top function
in jQuery returns the current position
the user is at inside of the text area
as they are scrolling so now what we can
do we can change this to you have
scrolled and are at position and then we
can append on the scroll position so
it's now going to say you have scrolled
and our apt position and it's going to
give us the current position that we're
at so let's refresh and test this I'm
going to start to scroll and you can see
that the numbers are dynamically
changing as I scroll all the way to the
bottom of the text area okay so why
might this scroll that'd be useful in
some websites you see that they have a
list of terms and conditions inside a
text area in which you're meant to
scroll down and read if you were to use
this you could match the position you're
scrolling at to the height of this box
now when the user has reached the end
you could then display something like I
agree I have read the terms and
conditions
so apart from demonstrating this event
handler it's also useful to note where
it might be used so that's essentially
the scroll event handler in jQuery and a
bit about where it might be used