Question

Basically, the overflow of a certain div in the page is set to scroll vertically. I want the user to be able to scroll immediately after the page loads. In order to scroll, at this time you must first click on that div and then you can scroll.

How can I make this happen straight away? I would kindly ask you to refrain from document.location.hash methods as this seems to be causing some other problems within pages for some reason.

If you look at the page, the scrollable div is #mainView.

Example page

Answer 1

Well, you can use window.scroll(). It even seems to be fairly well supported (IE9, Chrome, Firefox). IE8/7 I’m not so sure, since it doesn’t recognize the height: 100% on the html, body elements.

For instance, here I will create twenty elements dynamically and set the window.scroll to the total height of the div, which in turn is (supposed to be) the same height as the document.body “height”.

Try it out:

(function load(d) {
    var body = d.body,
        i = 0,
        div,
        winheight = h(),
        scroll = 0;

    (function loop() {
        if (i++ < 20) {
            scroll = scroll + 20 + 100 + 5 + winheight;

            div = document.createElement('div'); 
            div.style.height = winheight - 125 + 'px';
            div.className = 'block';
            div.innerHTML = 'DIV #' + i;

            document.body.appendChild(div);

            window.scroll(0, scroll);

            setTimeout(loop, 2000);
        }
    })();

    function h() {
        return Math.max(
            Math.max(body.scrollHeight, d.documentElement.scrollHeight),
            Math.max(body.offsetHeight, d.documentElement.offsetHeight),
            Math.max(body.clientHeight, d.documentElement.clientHeight)
        );
    }    
})(document);

​Demonstration (Source)