鎖定鼠標滾輪以對焦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

然後直接看，如果側邊欄是在底部/頂部已經滾動如果是，則過濾掉滾動事件。