This lesson, we're going to be setting up the scrolling and the scrolling content within our Element
scroller, let's add in one more event, listener and this event listener is going to listen for whenever
the page loads and whenever the page loads, then we're going to invoke a function.
So there's a number of ways to do that.
We're going to use the window onload method, and this is a default method within the Windows Object
will initiate a function called set up scroll.
Let's build that function.
So setting up that function and this is going to be basically our setting up function, we're going
to need some content in order to add in here.
So let's set up a variable for that.
And this is main content area.
I'm going to copy and paste some content in.
So this is some general lorem ipsum content so I can use that content and paste it into the element.
So that's going to be pasted within that element.
So making a selection of the element, updating the inner HTML and we are going to be using the paragraph
tags, so we're going to paste it in as HTML.
We also want to set up and select our bounding box.
So sure what that is.
So selecting a variable called temp.
Now that we've added in all of that content in there, let's get our bounding client rectangle values
and will console log those.
So we'll take a closer look at what that is.
So opening up our browser, do a quick refresh.
So now we've got our content is placed within that element.
And we also see that we've got this bounding client rectangle value here and this is an object.
So return back as an object.
We see we've got the bottom, we've got the height left, right, top width.
And we need some of these values in order to calculate out where our content is and how much more we
need to scroll it to get to the top of the page.
So we're going to take a closer look at that as well.
So opening up our browser, we're going to take a closer look at what that element get bounding client
does.
So going over to the Mozilla developer network, there's some syntax here, some information as well
as an example.
So you see within the example that it's going to be returning back that same information that we just
saw.
So basically, it allows you to get element information really easily using this one method.
There's also some additional specifications and of course, browser compatibility.
But for the most part, it's pretty good across most browsers.
So let's go back into our application that we're building out.
And now that we've got our height and we've got the height of the element, we can set certain values
so we can take our C element.
So this is the container element selecting our style height.
We're going to adjust the height of the element, using the values that are contained within that temp
object.
And we do have a value of height and we want to make sure that it's pic's.
So you do need to rate the pics.
So that renders out as a string value and that's how you set the style of an element.
We also need to have our top position for the S element.
So doing the same thing where we're getting our style and we're positioning it at the top, and that's
going to also be temp height plus pick.
And lastly, we're going to set an interval.
So that's going to be a variable that we're going to set up so we can call it a scroll interval.
And here, let's set up an interval where we're going to call a function scrolling element and we need
to specify how often we're going to call this function.
So going into our functions, we've got a few functions to create.
So creating our scrolling function.
So this one is going to get invoked on the interval so regularly interval.
And let's also position our elements.
We're going to apply some styling to those elements.
So going into our style sheet area.
We've got our C element.
So mainly so we can see it.
Let's get a background color, so this background.
Also, I'm going to set a default width for it so this can be 400 pics or whatever makes sense for you.
Setting up a font size is always a good idea.
So I'm just going to keep it as one M.
Again, our position, this one, so position at a relative.
And also adding in a border so we can actually see where it is and where it's sitting on the page.
And we're going to hide the overflow.
And also, let's apply to the other element, the element.
Let's apply a position to that so absolute position so we can move it around, we're going to set a
default of zero for the left position, also for the top position, zero, and we'll set a width of
one hundred percent.
And that's the element inside of the C element.
So our main container, that's the element that's contained with inside of it and listening to hash
as well.
So let's see what that looks like.
So now when we look at it, we don't see any text yet, and that's because we've got that overflow hidden.
So if I was to eliminate that, you see all of the text there, it's all sitting there ready to go.
And what's going to happen and what we're going to do in the upcoming lesson is we're going to get all
of this text.
We're going to move it up and move it right to the top of this element.
And then we're going to have it scrolling constantly.
So go ahead and make these adjustments to your application.
And we're going to introduce some more functionality in the upcoming lesson where we can actually make
this content move and scroll.
So set up your content.
You can add in whatever content you want within the application.
Also update some of your styling.
You do need to set position as absolute so that it can move.
Also, it's always a good idea for the border, the background, so that we know where our main container
is and then going down to windows on load.
So whenever the windows loads, whenever the window loads, then we initiate the function set, set
up scroll.
And this is where we add the content to the element.
We get our bounding box of our content.
So that lets us calculate out what the height of the C element is and we don't have to set it at this
height.
It's just something it's just a value that we're going to be making use of as well as our top position
of our content.
So wherever the top is, and this is going to be essentially the height plus the plus picks will equal
wherever the top is needs to be.
And once you've got all of these values in place, so what that is doing is its positioning that text
just below the visible area and it's ready to initiate the scroll.
We've set it up on an interval.
So that's why this function is being invoked every 50 milliseconds and that's why we've got a whole
lot of work.
So go ahead and add this into your project.
And coming up next, we're going to create some more interaction.