滾動到div內的元素

我有一個絕對定位的div，它充當頁面中心的模態窗口。模態窗口可以通過右側的滾動條進行垂直滾動。頁面本身也可以通過右側的滾動條進行垂直滾動。我希望能夠點擊一個鏈接，並讓模態窗口滾動到鏈接的項目。滾動到div內的元素

我幾乎可以實現這個使用target.scrollIntoView（）;但整個頁面隨着模式窗口一起滾動 - 我希望它可以讓頁面不移動並且只有模態窗口滾動。如果我使用scrollIntoView（false），頁面本身不滾動，而模態窗口，但目標元素是在窗口的底部，而我希望它在頂部。

有什麼辦法可以手動補償div內目標的位置嗎？即如果我使用scrollIntoView（false），目標顯示在div的底部 - 如果我可以通過視圖窗口的高度偏移它，我應該能夠將它移動到頂部..？

注：我不能使用JQuery之類的。

在此先感謝您的幫助。

來源

2010-09-16 thor

您可以嘗試將整數值分配給scrollTop屬性。

來源

2010-09-16 19:53:39

這裏有一個現場演示，我認爲做你在找什麼：http://jsfiddle.net/QN3mK/

做它的代碼是這樣的：（主要是檢查scrollFunc()功能）

function scrollFunc() { 
    var est = document.getElementById('est'); 
    var docPos = f_scrollTop(); 
    est.scrollIntoView(); 
    window.scrollTo(0,docPos); 
} 

function f_scrollTop() { 
    return f_filterResults (
     window.pageYOffset ? window.pageYOffset : 0, 
     document.documentElement ? document.documentElement.scrollTop : 0, 
     document.body ? document.body.scrollTop : 0 
    ); 
} 

function f_filterResults(n_win, n_docel, n_body) { 
    var n_result = n_win ? n_win : 0; 
    if (n_docel && (!n_result || (n_result > n_docel))) 
     n_result = n_docel; 
    return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result; 
}

第二兩個功能只是一個跨瀏覽器兼容的方式，我發現獲取當前頁面的滾動位置。因此，它所做的是找到一個元素（大概在可滾動div內），獲取當前頁面的滾動位置，將元素滾動到視圖中（這會將其放在可滾動div的頂部），然後重置頁面位置到哪裏去了。可能不是一個理想的解決方案，但它會完成工作。

來源

2010-09-16 20:37:17 Ender

感謝您的回覆 - 我會看看這個。與此同時，我似乎已經達到了我所要求的，只需將div.scrollTop設置爲鏈接元素的offsetTop即可。 – thor 2010-09-17 09:55:36

滾動到div內的元素

回答

相關問題