Question

I have a <div> with some content. I gave this div an id attribute, oDIV, and bound a function to the onscroll event via this small script:

window.onload = {
    document.getElementById("oDiv").onscroll = function() {
        document.getElementById("tooltip").className = "sTooltip";
        this.onscroll = null;
    };  
}

I added some simple CSS to the div, so that a vertical scroll bar would appear. Content stretches down quite a bit and there’s a lot to scroll.

#oDiv {
     border: 1px solid black;
     float: left;
     height: 300px;
     overflow: auto;
     overflow-x: hidden;
     padding: 0;
     padding-right: 40px;
     clear: left;
}

Anyways, if the user tries to scroll I want a tooltip to appear to remind the user that there’s a filter option to hide some of the stuff they have to scroll, through.

In Firefox and more current browsers it worked just fine.

The problem I have, is I have to support IE6, and this approach does work in IE6 but there’s a slight issue. If you “grab” the scroll bar by left clicking and holding and continue to drag when the event is fired the scroll bar is prematurely released. Forcing the user to again click on the drag bar. It’s a minor issue, but I want to know why?

I only intend to fire this event once ever, only when scrolling has initiated.

If a library or framework has solved this odd behavior, could you please show their source to which they address this?

Also, I think timing libraries etc. al for determining the “point at which they stopped scrolling” is way overkill for this.

Answer 1

It could be because IE is pausing to render the “tooltip”. Instead of using display:none on your tooltip try to use visibility:hidden and then toggle to visibility:visible.