javascript - 滚动到 div 中的元素

Question

我有一个绝对定位的 div，它充当页面中央的模态窗口。模态窗口可以垂直滚动，右侧有一个滚动条。页面本身也可以垂直滚动，右侧有一个滚动条。我希望能够单击链接并让模态窗口滚动到链接的项目。

我几乎可以使用 target.scrollIntoView() 来实现这一点；但整个页面与模态窗口一起滚动 - 我希望它不会移动并且只有模态窗口滚动。如果我使用 scrollIntoView(false)，页面本身不会滚动，而模态窗口会滚动，但目标元素位于窗口底部，而我希望它位于顶部。

有什么方法可以手动偏移目标在 div 中的位置吗？即如果我使用 scrollIntoView(false)，目标显示在 div 的底部 - 如果我可以将它偏移 View 窗口的高度，我应该能够将它移动到顶部..？

注意:我不能为此使用 JQuery 或类似的东西。

在此先感谢您的帮助。

Answer 1

这是一个现场演示，我认为它可以满足您的需求: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 中)，获取页面的当前滚动位置，将元素滚动到 View 中(这将把它放在可滚动的 div 的顶部)然后将页面位置重置回来到它原来的地方。可能不是理想的解决方案，但它可以完成工作。