首頁猿問當(dāng)內(nèi)部元素滾動位置到達頂部/底部時...

當(dāng)內(nèi)部元素滾動位置到達頂部/底部時，防止父元素滾動？

JavaScript

藍山帝景 2019-10-12 07:07:08

當(dāng)內(nèi)部元素滾動位置到達頂部/底部時，防止父元素滾動？我有一個小小的“浮動工具箱”position:fixed; overflow:auto..效果很好。但是當(dāng)在該框內(nèi)滾動(鼠標輪)并到達底部或頂部時，父元素“接管”滾動請求“：工具箱滾動后的文檔。-這是令人討厭的，而不是用戶“要求”的。我正在使用jQuery，并認為我可以通過事件停止這種行為：$("#toolBox").scroll( function(event){ event.stoppropagation() });它確實輸入了函數(shù)，但是仍然會發(fā)生傳播(文檔滾動)。-在so(和Google)上搜索這個主題是非常困難的，所以我不得不問：如何防止?jié)L動事件的傳播/冒泡？編輯：工作解決方案的娛樂(和布蘭登亞倫的鼠標輪插件在這里：https：/github.com/brandonaaron/jQuery-mouse輪/RAW/master/jquery.mousewar.js$(".ToolPage").bind('mousewheel', function(e, d) var t = $(this); if (d > 0 && t.scrollTop() === 0) { e.preventDefault(); } else { if (d < 0 && (t.scrollTop() == t.get(0).scrollHeight - t.innerHeight())) { e.preventDefault(); } }});

查看完整描述

3 回答

largeQ

TA貢獻2039條經(jīng)驗獲得超8個贊

本質(zhì)上，代碼通過處理mousewheel事件。每個這樣的事件都包含一個wheelDelta等于px它將把可滾動區(qū)域移動到。如果此值是>0，那我們就是在滾動up..如果wheelDelta是<0然后我們就開始滾動down.

火狐*Firefox使用DOMMouseScroll作為事件，并填充originalEvent.detail，他的+/-與上面描述的相反。它通常返回3，而其他瀏覽器則以120(至少在我的機器上)。要糾正，我們只需檢測它并乘以-40使之正?；?/p>

如果<div>可滾動區(qū)域已經(jīng)位于頂部或底部的最大值位置。Internet資源管理器在以下情況下忽略已取消的事件：delta大于剩余的可滾動空間。

換句話說，如果你有一個200px高的<div>含500px可滾動內(nèi)容和當(dāng)前scrollTop是400..mousewheel事件，它告訴瀏覽器滾動120px進一步的結(jié)果將導(dǎo)致<div>而<body>滾動，因為400?+?120?>?500.

因此，為了解決這個問題，我們必須做一些稍微不同的事情，如下所示：

所需jQuery守則是：

$(document).on('DOMMouseScroll?mousewheel',?'.Scrollable',?function(ev)?{
????var?$this?=?$(this),
????????scrollTop?=?this.scrollTop,
????????scrollHeight?=?this.scrollHeight,
????????height?=?$this.innerHeight(),
????????delta?=?(ev.type?==?'DOMMouseScroll'??
????????????ev.originalEvent.detail?*?-40?:
????????????ev.originalEvent.wheelDelta),
????????up?=?delta?>?0;

????var?prevent?=?function()?{
????????ev.stopPropagation();
????????ev.preventDefault();
????????ev.returnValue?=?false;
????????return?false;
????}

????if?(!up?&&?-delta?>?scrollHeight?-?height?-?scrollTop)?{
????????//?Scrolling?down,?but?this?will?take?us?past?the?bottom.
????????$this.scrollTop(scrollHeight);
????????return?prevent();
????}?else?if?(up?&&?delta?>?scrollTop)?{
????????//?Scrolling?up,?but?this?will?take?us?past?the?top.
????????$this.scrollTop(0);
????????return?prevent();
????}});

本質(zhì)上，此代碼將取消創(chuàng)建不需要的邊緣條件的任何滾動事件，然后使用jQuery設(shè)置scrollTop.的.<div>值的最大值或最小值，取決于mousewheel事件是請求的。

由于事件在任何一種情況下都完全被取消，因此它永遠不會傳播到body因此，它解決了IE以及所有其他瀏覽器中的問題。

反對回復(fù) 2019-10-13

ibeautiful

TA貢獻1993條經(jīng)驗獲得超6個贊

我知道這是個很老的問題，但這是谷歌的最高成績之一.我不得不在沒有jQuery的情況下取消滾動冒泡，這段代碼適用于我：

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
    e.preventDefault();
  e.returnValue = false;  }document.getElementById('a').onmousewheel = function(e) { 
  document.getElementById('a').scrollTop -= e. wheelDeltaY; 
  preventDefault(e);}

反對回復(fù) 2019-10-13