Scrolling div with Javascript

You can scroll div with javascript. You need to have one mainContainer which will contain the child for it. eg.

I will have mainArea div with child div myReport.

<div id=”mainArea”>
<div id=”myReport”>

</div>
</div>

You need to fixed the height for the mainArea div with style

<div id=”mainArea” style=”height:400px;overflow:auto”>
<div id=”myReport”>

</div>
</div>

Now your div can scroll, You now need to write one line code in any javascript function

function scrollMainArea()
{
document.getElementById(“mainArea”).scrollTop = 0;
}

This will move your myReport div to show the top portion of your division.

I am using this codes in my chat application to scroll the messages automatically.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: