lock mousewheel scroll to focus div

Question

У меня есть боковая панель на моем сайте, которую иногда нужно прокручивать. Это неприятный пользовательский опыт, когда после прокрутки боковой панели на дно с помощью мыши, главное окно начинает прокручиваться.

Я хочу, чтобы главное окно не прокручивалось с помощью колеса мыши, когда колесико мыши находится над боковой панелью, хотя желательно, только когда на моей боковой панели отображаются полосы прокрутки.

Возможно, мне бы хотелось избежать использования полос прокрутки javascript, поскольку они, как представляется, часто не работают, а также значения по умолчанию (laggier, wait on other js code и т. Д.), Хотя похоже, что это решение может потребовать их.

Спасибо!

EDIT :: Вот код, в котором я закончил использование простой адаптации того, что я нашел в первой ссылке из моего принятого ответа.

(function($) { 
    $.fn.hasScrollBar = function() { 
     return this.get(0).scrollHeight > this.height(); 
    } 
})(jQuery); 

/** This is high-level function. 
* It must react to delta being more/less than zero. 
*/ 
function handle(delta) { 
    slider = $('#wl-slider'); 

    if(slider.hasScrollBar()){ 
     if (delta > 0 && slider.scrollTop() == 0 && slider.hasClass('scroll-hover')){ 
      event.preventDefault(); 
      event.returnValue = false; 
     } 
     else if (delta < 0 && (slider.get(0).scrollHeight - slider.scrollTop() == slider.outerHeight()) && slider.hasClass('scroll-hover')){ 
      event.preventDefault(); 
      event.returnValue = false; 
     } 

    } 
} 



/** Event handler for mouse wheel event. 
*/ 
function wheel(event){ 

     var delta = 0; 
     if (!event) /* For IE. */ 
       event = window.event; 
     if (event.wheelDelta) { /* IE/Opera. */ 
       delta = event.wheelDelta/120; 
     } else if (event.detail) { /** Mozilla case. */ 
       /** In Mozilla, sign of delta is different than in IE. 
       * Also, delta is multiple of 3. 
       */ 
       delta = -event.detail/3; 
     } 
     /** If delta is nonzero, handle it. 
     * Basically, delta is now positive if wheel was scrolled up, 
     * and negative, if wheel was scrolled down. 
     */ 
     if (delta) 
       handle(delta); 

} 

/** Initialization code. 
* If you use your own event management code, change it as required. 
*/ 
if($('#user-level').size() != 0) 
{ 
    if (window.addEventListener) 
     /** DOMMouseScroll is for mozilla. */ 
     window.addEventListener('DOMMouseScroll', wheel, false); 
    /** IE/Opera. */ 
    window.onmousewheel = document.onmousewheel = wheel; 
} 

Answer 1

Я думаю, вам не хватит стандартных обработчиков событий, например. в JQuery, и вы должны непосредственно обрабатывать колесо мыши - я просто гугле эти ресурсы:

• http://www.adomas.org/javascript-mouse-wheel/
• http://www.javascriptkit.com/javatutors/onmousewheel.shtml

А потом смотрите, если боковая панель уже прокручивается в нижней/верхней и если да, отфильтруйте событие прокрутки.