锁定鼠标滚轮以对焦div

Question

我在我的网站上有一个侧栏，偶尔需要滚动。当使用鼠标滚轮将边栏滚动到底部后，主窗口开始滚动时，这是一种不愉快的用户体验。

我想，以确保主窗口不使用鼠标滚轮滚动时，鼠标滚轮是在我的侧边栏，但最好只当我的侧边栏本身显示滚动条。

我可能想避免使用JavaScript滚动条，因为它们看起来往往不像默认值（laggier，等待其他js代码等），尽管它看起来像这个解决方案可能需要它们。

谢谢！

编辑:: 这里是我最终使用的代码，我从我接受的答案中找到的第一个链接的简单改编。

(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和需要直接处理鼠标滚轮 - 我只是用Google搜索这些资源：

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

然后直接看，如果侧边栏是在底部/顶部已经滚动如果是，则过滤掉滚动事件。