scroll select tag but not body

Question

I have a select tag

<select multiple style="width:200px; height:100px"> ... </select>

which contains a lot of items inside. Hence, a scrollbar appears. However, when I tried to scroll down the list, not only does the list scrolls (the desired outcome), but the whole page also scrolls down (which is very annoying).

Anyone know how to fix this?

Edit: Sorry guys for leaving out the details. Here is a complete code

<!DOCTYPE html>
<head>
    <title>Head</title>     
</head>
<body>
<div style="width:200px;">
    <select multiple style="width:200px; height:100px;">
        <option>a</option><option>a</option><option>a</option><option>a</option>
        <option>a</option><option>a</option><option>a</option><option>a</option>
        <option>a</option><option>a</option><option>a</option><option>a</option>
        <option>a</option><option>a</option><option>a</option><option>a</option>
        <option>a</option><option>a</option><option>a</option><option>a</option>
        <option>a</option><option>a</option><option>a</option><option>a</option>
        <option>a</option>
    </select>
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
    a<br>a<br>a<br>a<br> 
</body>
</html>

Safari 6 displays the correct behavior (scroll page down only when the scrollbar of the select is already at the bottom), but Chrome 28 doesn't.

Please post your HTML CSS code here or at jsfiddle, one more thing is- did you ever tried it on other browsers? is it works on diff browsers? — Chandrakant, Jul 25 '13 at 06:16

score 0 · Answer 1 · edited May 23 '17 at 12:03

0

This post describes how you can surpress scrolling temporarily. You could use part of that code to solve your problem.

edited May 23 '17 at 12:03

Community

1
1

answered Jul 25 '13 at 06:19

Eschon

508
6
24

scroll select tag but not body

1 Answers1