一千萬個為什麽

搜索

將頁面滾動到某個點,然後僅使用一個滾動條開始滾動div的溢出內容

我正在閱讀一些關於如何使頁面的滾動條滾動div的溢出內容而不是頁面滾動到某一點的信息。

最終的結果是滾動頁面到標題不再可見的程度,但從那一點開始滾動div的內容 - 使用主滾動條,而不是兩個嵌套的滾動條。

如果用戶向上滾動,以便div內容一直在頂部,頁面應該恢復滾動並再次顯示標題。

最佳答案

您可以使用元素的 scrollTop屬性來完成此操作。首先,您需要確定標題的結束位置(滾動窗口的位置):

var header = $('#header');
var headerBottom = header.offset().top + header.height();

然後,您可以將窗口的滾動條設置為此位置:

$(window).animate({scrollTop: headerBottom});

完成後,您將獲得對您想要的任何元素的引用,然後滾動並為其 scrollTop 位置設置動畫(與上面的代碼段相同的代碼滾動 window )。

最後你需要一個滾動事件處理程序,以便你可以確定何時需要更改你的元素滾動內容:

$(window).scroll(function(){
   //logic to determine which element should be scrolling
});    

轉載註明原文: 將頁面滾動到某個點,然後僅使用一個滾動條開始滾動div的溢出內容