滚动到div中的元素

Question

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

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

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

注意:我不能使用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中),获取页面的当前滚动位置,将元素滚动到视图中(将它放在可滚动div的顶部)然后重置页面位置它到底在哪里.可能不是一个理想的解决方案,但它将完成工作.