PRB: Too Many Onscroll Events When User Scrolls

View products that this article applies to.

This article was previously published under Q238004

Symptoms

When a user clicks a scroll bar, Internet Explorer 5 fires multiple onscroll events instead of one as in Internet Explorer 4.

↑ Back to the top

Cause

Internet Explorer 5 scrolls an HTML page in small increments, with each one generating a scroll event.

↑ Back to the top

Resolution

You can institute the same behavior in Internet Explorer 5 as occurs in Internet Explorer 4 in the following way: use a global variable flag and test against it when the onscroll event fires. The first time, invoke the code you want and alter the flag; subsequently, do nothing. Use setTimeout to reset the flag in, say, 200 milliseconds to bypass on the subsequent events.

The following pseudocode demonstrates the workaround:

<SCRIPT>
Dim CounterForScroll
Function divNumbers_OnScroll()
    If (CounterForScroll = 0) Then
        CounterForScroll = CounterForScroll + 1
        '... event handler code ...
        CountOnScroll = CountOnScroll + 1
        txtOnScroll.Value=CountOnScroll
        window.setTimeout "Reset()",  200
    End If
End Function

Function Reset()
        CounterForScroll = 0
End Function
</SCRIPT>

↑ Back to the top

Status

This behavior is by design.

↑ Back to the top

More information

Steps to Reproduce Behavior

Save the following HTML as TestIE5Scroll.htm:

<HTML>
<HEAD>
<TITLE>Q238004: Too many onscroll events when scrolling</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!--
    Dim CountOnScroll

    Sub Window_OnLoad()
        CountOnScroll = 0
        txtOnScroll.Value = CountOnScroll
    End Sub

    Sub divNumbers_OnScroll()
        CountOnScroll = CountOnScroll + 1
        txtOnScroll.Value=CountOnScroll
    End Sub
	
    Sub btnOnScroll_OnClick()
        CountOnScroll = 0
        txtOnScroll.Value = CountOnScroll
    End Sub
-->
</SCRIPT>
</HEAD>
<BODY>
To Test, click on the scrollbar of the DIV tag (containing numbers). <P></P>

<DIV ID="divNumbers" STYLE="overflow:scroll; width=200px; height=500px">
1 <BR>2 <BR>3 <BR>4 <BR>5 <BR>6 <BR>7 <BR>8 <BR>9 <BR>10 <BR>
11 <BR>12 <BR>13 <BR>14 <BR>15 <BR>16 <BR>17 <BR>18 <BR>19 <BR>20 <BR>
21 <BR>22 <BR>23 <BR>24 <BR>25 <BR>26 <BR>27 <BR>28 <BR>29 <BR>30 <BR>
31 <BR>32 <BR>33 <BR>34 <BR>35 <BR>36 <BR>37 <BR>38 <BR>39 <BR>40 <BR>
41 <BR>42 <BR>43 <BR>44 <BR>45 <BR>46 <BR>47 <BR>48 <BR>49 <BR>50 <BR>
</DIV>
<P></P>
The number of onscroll fires: 
<INPUT Type="Text" ID = "txtOnScroll" Name = "txtOnScroll">
<INPUT Type="Button" Value = "Reset the counter" ID = "btnOnScroll" name = "btnOnScroll">
</BODY>
</HTML>

Navigate to this HTML file with Internet Explorer 5.
Click the scrollbar of the DIV tag. The code fires the onscroll event multiple times. (The same code fires onscroll only once per scroll in Internet Explorer 4.)

↑ Back to the top