滾動div div滾動窗口，我該如何阻止它？

Question

我有一個div，帶有滾動條，當它到達最後，我的頁面開始滾動。無論如何，我可以阻止這種行爲嗎？

Answer 1

找到解決方案。

http://jsbin.com/itajok

這就是我所需要的。

這是代碼。

http://jsbin.com/itajok/edit#javascript,html

使用一個jQuery插件。

---

更新由於取消通知

從jquery-mousewheel：

添加三個參數（delta，deltaX，並deltaY） 到事件處理程序的舊的行爲現在已經過時並將在稍後的 版本中刪除。

然後，event.deltaY現在必須使用：

var toolbox = $('#toolbox'), 
    height = toolbox.height(), 
    scrollHeight = toolbox.get(0).scrollHeight; 

toolbox.off("mousewheel").on("mousewheel", function (event) { 
    var blockScrolling = this.scrollTop === scrollHeight - height && event.deltaY < 0 || this.scrollTop === 0 && event.deltaY > 0; 
    return !blockScrolling; 
}); 

Demo

Answer 2

如果您將overflow: hidden風格應該走

編輯：其實我看了你的問題錯了，只會隱藏滾動條，但我不認爲這是你在找什麼。

<div onmouseover="document.body.style.overflow='hidden';" onmouseout="document.body.style.overflow='auto';"></div> 

Answer 3

你可以做這樣的事情滅活整個頁面的滾動？

E.g.該HTML

<div onmouseover="disableBodyScroll();" onmouseout="enableBodyScroll();"> 
    content 
</div> 

然後的JavaScript像這樣：

var body = document.getElementsByTagName('body')[0]; 
function disableBodyScroll() { 
    body.style.overflowY = 'hidden'; 
} 
function enableBodyScroll() { 
    body.style.overflowY = 'auto'; 
} 

Answer 4

你可以在DIV上使用鼠標懸停事件禁用身體滾動條，然後mouseOut事件再次激活它：

Answer 5

如果我正確理解你的問題，那麼你要防止的主要內容滾動當鼠標移動到一個div（假設側欄）。爲此，側欄可能不是主內容（它是瀏覽器窗口）的滾動容器的子項，以防止滾動事件冒泡到其父項。

這可能需要通過以下方式標記的一些變化：

<div id="wrapper"> 
    <div id="content"> 
    </div> 
</div> 
<div id="sidebar"> 
</div> 

看到它的工作在this sample fiddle和比較，與this sample fiddle具有側邊欄的一個稍微不同的鼠標離開的行爲。請參閱scroll only one particular div with browser's main scrollbar。

Answer 6

所選解決方案是藝術作品。認爲這是值得的一個插件....

$.fn.scrollGuard = function() { 
    return this 
     .on('wheel', function (e) { 
      var event = e.originalEvent; 
      var d = event.wheelDelta || -event.detail; 
      this.scrollTop += (d < 0 ? 1 : -1) * 30; 
      e.preventDefault(); 
     }); 
};  

這一直是我的一個持續的不便，並與我見過的其他黑客這個解決方案是那麼幹淨。很想知道它是如何工作的，以及它會得到多大的支持，但是歡迎Jeevan和最初想到這個的人。順便說一句 - stackoverflow的答案編輯器需要這個！

UPDATE

我相信這是因爲它並不試圖在所有操作DOM更好，只有防止起泡有條件...

$.fn.scrollGuard2 = function() { 
    return this 
    .on('wheel', function (e) { 
     var $this = $(this); 
     if (e.originalEvent.deltaY < 0) { 
     /* scrolling up */ 
     return ($this.scrollTop() > 0); 
     } else { 
     /* scrolling down */ 
     return ($this.scrollTop() + $this.innerHeight() < $this[0].scrollHeight); 
     } 
    }) 
    ; 
};  

工程在鉻和許多偉大的比其他解決方案更簡單...讓我知道它是如何票價別處......

FIDDLE

Answer 7

您可以通過做這樣的事情來禁用整個頁面的滾動，但顯示滾動條！

<div onmouseover="document.body.style.overflow='hidden'; document.body.style.position='fixed';" onmouseout="document.body.style.overflow='auto'; document.body.style.position='relative';"></div> 

Answer 8

我寫了解決此問題

var div; 
    div = document.getElementsByClassName('selector')[0]; 

    div.addEventListener('mousewheel', function(e) { 
    if (div.clientHeight + div.scrollTop + e.deltaY >= div.scrollHeight) { 
     e.preventDefault(); 
     div.scrollTop = div.scrollHeight; 
    } else if (div.scrollTop + e.deltaY <= 0) { 
     e.preventDefault(); 
     div.scrollTop = 0; 
    } 
    }, false); 

Answer 9

$this.find('.scrollingDiv').on('mousewheel DOMMouseScroll', function (e) { 
    var delta = -e.originalEvent.wheelDelta || e.originalEvent.detail; 
    var scrollTop = this.scrollTop; 
    if((delta < 0 && scrollTop === 0) || (delta > 0 && this.scrollHeight - this.clientHeight - scrollTop === 0)) { 
    e.preventDefault(); 
    } 
}); 

Answer 10

如果輸入選擇器元素此禁用窗口上的滾動。 的作品像魅力。

elements = $(".selector"); 

elements.on('mouseenter', function() { 
    window.currentScrollTop = $(window).scrollTop(); 
    window.currentScrollLeft = $(window).scrollTop(); 
    $(window).on("scroll.prevent", function() { 
     $(window).scrollTop(window.currentScrollTop); 
     $(window).scrollLeft(window.currentScrollLeft); 
    }); 
}); 

elements.on('mouseleave', function() { 
    $(window).off("scroll.prevent"); 
}); 

Answer 11

基於CEED的答案，這裏是一個版本，它允許嵌套滾動把守的元素。只有鼠標結束的元素纔會滾動，並且滾動得非常順利。這個版本也是可重入的。它可以在同一個元素上多次使用，並將正確刪除並重新安裝處理程序。使用

jQuery.fn.scrollGuard = function() { 
    this 
     .addClass('scroll-guarding') 
     .off('.scrollGuard').on('mouseenter.scrollGuard', function() { 
      var $g = $(this).parent().closest('.scroll-guarding'); 
      $g = $g.length ? $g : $(window); 
      $g[0].myCst = $g.scrollTop(); 
      $g[0].myCsl = $g.scrollLeft(); 
      $g.off("scroll.prevent").on("scroll.prevent", function() { 
       $g.scrollTop($g[0].myCst); 
       $g.scrollLeft($g[0].myCsl); 
      }); 
     }) 
     .on('mouseleave.scrollGuard', function() { 
      var $g = $(this).parent().closest('.scroll-guarding'); 
      $g = $g.length ? $g : $(window); 
      $g.off("scroll.prevent"); 
     }); 
}; 

一個簡單的方法是增加一類，如scroll-guard，所有的頁面，你能夠滾動顯示上的元素。然後使用$('.scroll-guard').scrollGuard()來保護他們。

Answer 12

我不能得到任何答案在Chrome和Firefox的工作，所以我想出了這個合併：

$someElement.on('mousewheel DOMMouseScroll', scrollProtection); 

function scrollProtection(event) { 
    var $this = $(this); 
    event = event.originalEvent; 
    var direction = (event.wheelDelta * -1) || (event.detail); 
    if (direction < 0) { 
     if ($this.scrollTop() <= 0) { 
      return false; 
     } 
    } else { 
     if ($this.scrollTop() + $this.innerHeight() >= $this[0].scrollHeight) { 
      return false; 
     } 
    } 
} 

Answer 13

這裏是一個跨瀏覽器的方式做到這一點在Y軸上，它適用於桌面和移動設備。在OSX和iOS上測試。

var scrollArea = this.querySelector(".scroll-area"); 
scrollArea.addEventListener("wheel", function() { 
    var scrollTop = this.scrollTop; 
    var maxScroll = this.scrollHeight - this.offsetHeight; 
    var deltaY = event.deltaY; 
    if ((scrollTop === maxScroll && deltaY > 0) || (scrollTop === 0 && deltaY < 0)) { 
     event.preventDefault(); 
    } 
}); 

scrollArea.addEventListener("touchstart", function(event) { 
    this.previousClientY = event.touches[0].clientY; 
}); 

scrollArea.addEventListener("touchmove", function(event) { 
    var scrollTop = this.scrollTop; 
    var maxScroll = this.scrollHeight - this.offsetHeight; 
    var currentClientY = event.touches[0].clientY; 
    var deltaY = this.previousClientY - currentClientY; 
    if ((scrollTop === maxScroll && deltaY > 0) || (scrollTop === 0 && deltaY < 0)) { 
     event.preventDefault(); 
    } 
    this.previousClientY = currentClientY; 
});