Question

I am an application development intern. I’m making an application using ASP.NET MVC3 that displays in boxes various projects the company using it is working on. These boxes are created in a table using a foreach loop.

    <div class= "row">
       @foreach (var item in Model)
       {
       @Html.Action("Client", new { controller = "Dashboard", Client = item })      
       } 
    </div>

I want these boxes to automatically scroll down if there is an overflow. This appears to be the function that I would like to use:

    function pageScroll() {
       window.scrollBy(0,50); // horizontal and vertical scroll increments
       scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
    }

How do I apply this function to the boxes being created in the foreach loop?

EDIT:
Using Timothy-Strimple’s advice, I used a Jquery plugin called scrollTo() to create this:

for (d = 0; d < 52; d) {

   $(".dashboard-well").scrollTo('100%', 10000).delay(2000);
   $(".dashboard-well").scrollTo('0%', 10000).delay(2000);
   d++;
 }

Now the div I was looking at, when overflowed, will scroll down, then back up 5x.

Answer 1

I’m not quite sure I understand what you’re trying to do. If you want to set a div to overflow: scroll, and then scroll to the bottom of it, that’s pretty straight forward with jQuery. I have done something like that on my sample chat app where the page will scroll to the bottom every time there is a new message. It looks like this:

$('#messages').scrollTop($('#messages')[0].scrollHeight);

So what you can do is after you’ve created all of your rows, set scrollTop on the element like I have done above, and set it to the scrollHeight and that will put the scrollbar at the bottom of the section.

If that is not what you are asking, please update your question or post a comment so I can update my answer.