How to disable rollover/scroll on hover over dropdown in IE

Question

Plnkr link - LINK

Steps to reproduce issue -

Open the plnkr link in IE
select a value from dropdown
hover over the dropdown and scroll with mouse

Issue -- the selected dropdown value will start changing on scroll.

Expected behaviour - the selected dropdown value should not change but the whole page should scroll.

Note -

this issue is not there in chrome, only in IE.
the dropdown value will change only after selecting a value and hovering over the dropdown field.

My code:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div id="wrap">
      <select>
          <option>foo</option>
          <option>bar</option>
          <option>baz</option>
          <option>foo</option>
          <option>bar</option>
          <option>baz</option>
          <option>foo</option>
          <option>bar</option>
          <option>baz</option>
          <option>foo</option>
          <option>bar</option>
          <option>baz</option>
          <option>foo</option>
          <option>bar</option>
          <option>baz</option>
          <option>foo</option>
          <option>bar</option>
          <option>baz</option>
          <option>foo</option>
          <option>bar</option>
          <option>baz</option>
          <option>foo</option>
          <option>bar</option>
          <option>baz</option>
      </select>
    </div>
    <div>
    garbage garbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbage garbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbage garbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbage garbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbage garbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbage garbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbage garbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbage garbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbage garbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbage garbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbage garbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbage garbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbage garbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbage garbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbage garbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    garbagegarbagegarbagegarbagegarbagegarbagegarbagegarbage
    </div>
  </body>

</html>

Update --

Tried the below -

<select onChange="if (this.selectedIndex) self.focus();">

But onChange is not triggered when the user selects the same value (previously selected value).

What have you done to try and solve this? It's good practice to show your code here, and you cheated by formatting "Code in the link" as code. Plunks are not permanent, and without that, this question has no meaning — Mikkel, Dec 17 '16 at 13:35
Don't try to cheat the system. If it wants you to put your code in the question just do it. — jwpfox, Dec 17 '16 at 21:13
you got a giggle out of me for "garbage garbage garbage...." — Jhecht, Dec 19 '16 at 06:13
i have tested on IE11. I am having the issue. Select a value in dropdown. Click on dropdown again and select the same value. Then hover over the dropdown and scroll with mouse, the selected value changes. — Nithin Kumar Biliya, Dec 22 '16 at 10:01

Shobhit Srivastava · Accepted Answer · 2016-12-19T06:10:31.267

2

This seems to disable it:

<select onChange="if (this.selectedIndex) self.focus();">

Works on IE6+, but I'm afraid this event is not supported in versions below that.

edited Dec 19 '16 at 06:10

answered Dec 16 '16 at 08:19

Shobhit Srivastava

549
3
13

this works, but the behaviour in Chrome - scroll page on hover over the dropdown stops working. – Nithin Kumar Biliya Dec 16 '16 at 08:50
yeah that issue will arise. Can you try replacing that with: onChange="self.focus()"; – Shobhit Srivastava Dec 16 '16 at 09:11
onChange="self.focus()"; works as expected. Edit the answer and i will accept it – Nithin Kumar Biliya Dec 16 '16 at 10:08
there is one problem with this solution. It gets fired only when the dropdown value has changed. If the user selects the same value and scrolls in IE, then the value will change to the next value and then the page scrolls – Nithin Kumar Biliya Dec 18 '16 at 06:59
-- this works as expected even when the same value is selected. from - [link](http://stackoverflow.com/a/7858323/1298824) – Nithin Kumar Biliya Dec 18 '16 at 07:05
@NithinKumarBiliya.. Nice improvement, I didn't think about that. Updated the answer – Shobhit Srivastava Dec 19 '16 at 06:11
--> even this will not work in IE when user selects the same value. – Nithin Kumar Biliya Dec 22 '16 at 08:17

score 2 · Answer 2 · answered Apr 22 '19 at 16:39

2

This worked great for me:

<select onmousewheel="return false">

Should be good for IE6 and above. This seems to work better than onchange because it will prevent scrolling even if you select the same value.

answered Apr 22 '19 at 16:39

Son Ha

141
1
3

Nithin Kumar Biliya · Answer 3 · 2016-12-22T19:47:14.177

0

Tried various options and ended up writing a angularjs directive for the same -

guthub link - angular select

Used element[0].blur(); to remove the focus off the select tag. Logic is to trigger this blur on second click of the dropdown.

as-select gets triggered even when user selects the same value in the dropdown.

DEMO - link

edited Dec 22 '16 at 19:47

answered Dec 22 '16 at 19:19

Nithin Kumar Biliya

2,763
3
34
54

How to disable rollover/scroll on hover over dropdown in IE

3 Answers3