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

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

Python

湖上湖 2019-12-18 17:13:18

當(dāng)內(nèi)部元素滾動(dòng)位置到達(dá)頂部/底部時(shí)，防止父元素滾動(dòng)？我有一個(gè)小小的“浮動(dòng)工具箱”position:fixed; overflow:auto..效果很好。但是當(dāng)在該框內(nèi)滾動(dòng)(鼠標(biāo)輪)并到達(dá)底部或頂部時(shí)，父元素“接管”滾動(dòng)請(qǐng)求“：工具箱滾動(dòng)后的文檔。-這是令人討厭的，而不是用戶“要求”的。我正在使用jQuery，并認(rèn)為我可以通過(guò)事件停止這種行為：$("#toolBox").scroll( function(event){ event.stoppropagation() });它確實(shí)輸入了函數(shù)，但是仍然會(huì)發(fā)生傳播(文檔滾動(dòng))。-在so(和Google)上搜索這個(gè)主題是非常困難的，所以我不得不問(wèn)：如何防止?jié)L動(dòng)事件的傳播/冒泡？編輯：工作解決方案的娛樂(lè)(和布蘭登亞倫的鼠標(biāo)輪插件在這里：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 回答

明月笑刀無(wú)情

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超4個(gè)贊

我加入這個(gè)答案是為了完整，因?yàn)?/trans>在InternetExplorer中，被接受的答案并不能正確地解決這個(gè)問(wèn)題。..請(qǐng)參閱我原來(lái)的帖子關(guān)于細(xì)節(jié)。此外，此解決方案不需要任何插件-僅jQuery。

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

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

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

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

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

所需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)建不需要的邊緣條件的任何滾動(dòng)事件，然后使用jQuery設(shè)置scrollTop.的.<div>值的最大值或最小值，取決于mousewheel事件是請(qǐng)求的。

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

我也放了一個(gè)jsFiddle上的工作實(shí)例.

反對(duì) 回復(fù) 2019-12-19

小唯快跑啊

TA貢獻(xiàn)1863條經(jīng)驗(yàn) 獲得超2個(gè)贊

我知道這是個(gè)很老的問(wèn)題，但這是谷歌的最高成績(jī)之一.我不得不在沒(méi)有jQuery的情況下取消滾動(dòng)冒泡，這段代碼適用于我：

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);}

反對(duì) 回復(fù) 2019-12-19