0

I have a <select> box with many options, and you can scroll through these. When you scroll to the bottom of the options list and continue scrolling, the scrolling "overflows" into the parent window, and scrolls the window down instead. Is there a way to turn this off, i.e. when you scroll to the bottom scrolling down is disabled?

Here is a fiddle. To get the effect I describe, mouse over the multiple select and scroll down (using the trackpad, scroll wheel, etc) to the bottom, then continue scrolling. The entire page will scroll. My desired behavior is for the entire page not to scroll when you reach the bottom of the select options.

jclancy
  • 49,598
  • 5
  • 30
  • 34
  • Do you want the user to be prevented from scrolling in the parent window altogether unless the options list is not at the bottom? – kmoe Jan 06 '14 at 17:51
  • 2
    any code, fiddle or image? Because I find it pretty hard to understand your issue and your desired behaviour – web-tiki Jan 06 '14 at 17:52
  • How are you doing the scrolling - with the mouse wheel? – Ann L. Jan 06 '14 at 17:52
  • Check out this answer on SO http://stackoverflow.com/questions/6207929/is-there-a-dom-event-that-fires-when-an-html-select-element-is-closed when you get the event you can disable window scroll 'temporarily' – nilobarp Jan 06 '14 at 17:54
  • @chadocat Done, is that clear? – jclancy Jan 06 '14 at 18:04
  • ok, now I see you issue, the small srollable div disapears. you could set it to `position:fixed` then the user's mouse can stay on it even when he reaches the bottom even though the rest of the page scrolls. If this doesn't suit you then you will need JS wich I won't be able to make for you. – web-tiki Jan 06 '14 at 18:14

1 Answers1

1

The only way to achieve what you want is to use javascript. The logic is pretty simple, on hover, you can add overflow: hidden; to the body, then onblur of the select element, you remove the overflow value.

The code would look something like this (give your select box an id of selectbox):

document.getElementById('selectbox').onmouseenter = function(){
    document.body.style.overflow = 'hidden';
};

document.getElementById('selectbox').onmouseout = function(){
    document.body.style.overflow = 'auto';
};

demo: http://jsfiddle.net/LRCKn/6/ - you just need to get it to apply the css change on the options elements as well.

Prisoner
  • 27,391
  • 11
  • 73
  • 102
  • I don't think select tag causes overflow on the page – Mr. Alien Jan 06 '14 at 17:55
  • the issue op has, is that with a select element if you scroll down quickly - it also scrolls down the page once you hit the bottom. he wants to stop this so you need to stop the page from having scrollbars when in the select element – Prisoner Jan 06 '14 at 18:00
  • @Mr.Alien, that's what I assumed he was asking for – Prisoner Jan 07 '14 at 09:29
  • +1 Yea, used this trick myself. However some browsers/devices also want the html-element to have the overflow property if i'm not mistaken. Though some browsers do support `document.html` some `document.documentElement`, but all support `document.body.parentElement` ^^ – nkmol Jan 07 '14 at 09:38