使用主瀏覽器滾動條滾動內部元素

我有一個內部元素，它具有固定的高度和寬度並且有overflow-y: scroll;集。使用主瀏覽器滾動條滾動內部元素

我想使用主瀏覽器滾動條首先滾動內部元素的內容，然後在到達內部元素內容的底部後繼續滾動頁面的其餘部分。

有什麼辦法可以在jQuery或JavaScript中做到這一點？

來源

2015-02-24 Kai

jQuery是一個Javascript庫，沒錯，它可能的，但你需要首先嚐試一些東西，解釋什麼具體的問題你有你的代碼 – andrew 2015-02-24 01:35:18

有沒有辦法在JavaScript中做到這一點！？天空是極限！雖然它可能不是你正在尋找的。不幸的是，你不能劫持「滾動」事件 - 它是不可取消的。

但是，您可以通過鼠標滾輪攔截滾動 - 這是大多數人滾動的方式。另一種選擇是創建自己的滾動條庫...但這非常費時。

（我已經這麼做了，順便說一下，你可以自由地使用它，並與它鬼混：http://code.fashionablydrab.com/fsb/但是，就像5年前，所以如果你有超過一個什麼樣的範圍的任何問題請參閱操作指南部分，這是您自己的。）

無論如何，回到ol'「mousewheel」事件。你猜怎麼了？它不是標準化的！所以每個瀏覽器都有自己的做法。 Firefox已經發布了具有deltaX和deltaY屬性的新「輪子」事件，並且他們同意Chrome/IE的「鼠標滾輪」事件的deltaX和deltaY，因此您不必處理整個「細節」問題。

這裏有一個小提琴：http://jsfiddle.net/bhn58xzx/1/

var scrollInfo = { 
    element: document.querySelector("#scroll") 
}; 

var wheelEvent = document.onmousewheel !== undefined ? "mousewheel" : "wheel"; 

function interceptWheel(e) { 
    if (e.currentTarget === scrollInfo.element) { 
     return; 
    } 
    var st = scrollInfo.element.scrollTop, 
     inc = e.deltaY; 

    if (e.type === "wheel") { 
     inc *= 100; 
    } 

    scrollInfo.element.scrollTop += inc 

    if (st !== scrollInfo.element.scrollTop) { 
     e.preventDefault(); 
    } 

    document.querySelector("#out").innerHTML = e.deltaY; 
}; 

document.body.addEventListener(wheelEvent, interceptWheel, false);

注意，它向上和向下滾動時的作品（容易改變的，只是檢測是否e.deltaY爲正/負修改scrollTop的前）。

如果支持舊的瀏覽器是必要的你，那麼我祝你一切順利;）

來源

2015-02-24 03:27:11 DRAB

真棒的東西哥們，完美！非常感謝，非常感謝。我花了幾個小時在網上搜索解決方案，嘗試使用所有不同的搜索短語來描述我正在嘗試做什麼 - 您是一個傳奇！ – Kai 2015-02-24 06:30:59

使用主瀏覽器滾動條滾動內部元素

回答

相關問題