Delayed autoscroll effect on a block of text

Question

Im fairly new to JS... please be gentle.

Can anyone suggest a way to pull off a delayed autoscroll effect on a block of text?

It's important to mention that my ultimate goal is to use this on a popup modal window, on iOS devices. And because iOS browsers do not display the scrollbar until user interaction, I am resorting to the auto-scroll.

In effect: I would like the page to load, wait a couple of seconds, then have begin to slowly scroll down. The scroll is intended to be a hint to the user that there is more content available, therefore if there is any way to stop or temporarily pause the auto-scroll on user interaction- that would be optimal.

I have searched for my answers a couple of hours now, but between not being able to initialize the found code to my design (again, I'm fairly green), and not being able to find a solution that achieves everything I need - I am turning to brighter minds.

I have set up a fiddle with my HTML and CSS: http://jsfiddle.net/zfMsQ/

Any help is greatly appreciated!

ps: This is my very first post on StackOverflow :)

My code:

Extensive. Linked above. 

Answer 1

Here you go: http://jsfiddle.net/zfMsQ/3/

var roll = true;
var max = 0;
var text = $("#content");

function scroll() {
    text.scrollTop(text.scrollTop() + 1)
    var top = text.scrollTop()
    if (top > max) {
        max = top
        if (roll) {
            setTimeout(scroll, 50)
        }
    }
}

text.on("mouseenter mouseover mousedown", function(){
 roll = false;   
})

setTimeout(scroll, 2000)