Scroll Content of div tag like page scrolling.

Hi guys today I have faced a requirement where I need to Scroll the content of one div to show all the content in it. Actually we had a Modal Popup which was displaying some sort of information based on link click by the user.

When ever we are going to show another html (web page) in modal popup we are facing this type of challenge as there in modal popup if you are scrolling by mouse the Parent page will get started scrolling. And hence here our JavaScript is helping as to achieve this functionality. 

Lets say you have a div with lots of content (text and images or video) and your modal popup size is small to show them at once so in this case you need to do like below .

Here I have used a html table control for Demo purpose you can as you like just we need is the id of the div control which we are going to scroll. Like here ‘’dvcontainer” .

<table width="175px">
        <tr>
            <td>
                <div style="position: relative; width: 175px; height: 160px; 

border: 1px solid black;
                    overflow: hidden">
                    <div id="dvcontainer" style="position: absolute; 

width: 170px; left: 0; top: 0">
                        <!--INSERT CONTENT HERE-->
                        <p>
                            Anand Mani Tiwari holds an Engineering degree in 

Computer Science from BPUT and
                            has previously worked at NCPL Inc. and now working 

at Orion Systems Integrators
                            Inc for a Client which is worlds Biggest Auditing 

Company KPMG. He is a Software
                            Engineer and working on different Microsoft 

Technologies like ASP.Net, WPF, Silverlight,
                            WCF... He is a Microsoft Certified Professional. 

And recently Passed Microsoft Technology
                            Specialist Exam in HTML 5 with a Excellent 

Score of 920/ 1000.
                        </p>
                        <p>
                            - <a href="http://www.2bexpert.com/p/about-me.html">

Click here to see his complete profile</a>
                        </p>
                        <!--END CONTENT-->
                    </div>
                </div>
            </td>
            <td>
                <a href="#" onmouseover="move('dvcontainer',1)" 

onmouseout="clearTimeout(move.to)">
                    <img alt="Page Up" src="images/up.gif" border="0"></a>
                <div style="height: 145px; display: block; 

background: url(images/);">
                </div>
                <a href="#" onmouseover="move('dvcontainer',-1)" 

onmouseout="clearTimeout(move.to)">
                    <img alt="Page Down" src="images/down.gif" border="0"></a>
            </td>
        </tr>
    </table>

 

After this we need to write the code for Scroll the “dvcontainer” content. So here we go with JavaScript ….

<script type="text/javascript" language="javascript">

        function move(id, spd) {
            var obj = document.getElementById(id), max = -obj.offsetHeight +

 obj.parentNode.offsetHeight, top = parseInt(obj.style.top);
            if ((spd > 0 && top <= 0) || (spd < 0 && top >= max)) {
                obj.style.top = top + spd + "px";
                move.to = setTimeout(function () { move(id, spd); }, 20);
            }
            else {
                obj.style.top = (spd > 0 ? 0 : max) + "px";
            }
        }

    </script>

That’s it now you can see the div content is getting scroll on mouse hover of Up and Down image.

Required Images for this demo :       

I hope this post has helped you, please comment. Thanks