The problem was that scrolling down in web pages containing some images was incredibly slow in firefox. That was due to the redraw of image while scrolling so I’ve decided to find a trick to hide some parts of the page during the time of scrolling.

After adding the javascript code to your page, just add the class « scrollhide » to objects that you want hide when scrolling.

exemple of use:

<div class= »scrollhide »>text to hide while scrolling</div>

<img src= »./img/imagetohide » class= »scrollhide »/>

You could easily use it to what ever you want during the onscroll event.

!!! Tested with firefox 3 and IE 7 !!!

var curdate = new Date()
var lastOnscroll = curdate.getTime();

function getElementsByClass(searchClass,node,tag) {
    var classElements = new Array();
    if ( node == null )
        node = document;
    if ( tag == null )
        tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i];
            j++;
        }
    }
    return classElements;
}

function timeHideBanner() {

    var newcurdate = new Date()
    if ((newcurdate.getTime() - lastOnscroll) > 200  ) {
        var myEls = getElementsByClass('scrollhide');
        for ( i=0;i<myEls.length;i++ ) {
        // do stuff here with myEls[i]
            myEls[i].style.visibility = 'visible';
        }
        //document.getElementById('banner').style.visibility = 'visible';
    }
}

function hideBanner() {
    var newcurdate = new Date()
    lastOnscroll = newcurdate.getTime();

    var myEls = getElementsByClass('scrollhide');
    for ( i=0;i<myEls.length;i++ ) {
    // do stuff here with myEls[i]
        myEls[i].style.visibility = 'hidden';
    }
    //document.getElementById('banner').style.visibility = 'hidden';
    var t=setTimeout("timeHideBanner()",300);
}

window.onscroll = function(){ hideBanner(); }

window.mouseup = function(){ document.getElementById('banner').style.visibility = 'visible'; }