滚动到div中的元素 [英] Scrolling to an element within a div

问题描述

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

I have an absolutely positioned div which acts as a modal window in the center of the page. The modal window is vertically scrollable with a scroll bar on the right hand side. The page itself is also vertically scrollable with a scroll bar on the right. I would like to be able to click on a link and have the modal window scroll to the linked item.

我可以使用目标实现这一目标。 scrollIntoView（）;但整个页面与模态窗口一起滚动 - 我希望它能使页面不移动，只有模态窗口滚动。
如果我使用scrollIntoView（false）页面本身不会滚动，而模态窗口会滚动，但目标元素位于窗口的底部，而我最喜欢它。

I can pretty much achieve this using target.scrollIntoView(); but the entire page scrolls along with the modal window - I would like it so the page does not move and have just the modal window scroll. If I use scrollIntoView(false) the page itself does not scroll, while the modal window does, but the target element is at the bottom of the window while I'd like it at the top.

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

Is there some way I can manually offset the position of the target within the div? i.e. if I use scrollIntoView(false), the target is displayed at the bottom of the div - if I could then offset it by the height of the view window I should be able to move it to the top..?

注意：我不能使用JQuery等。

Note: I can't use JQuery or the like for this.

提前感谢您的帮助。

推荐答案

这是一个现场演示，我认为你正在寻找的是： http://jsfiddle.net/QN3mK/

Here's a live demo that I think does what you're looking for: http://jsfiddle.net/QN3mK/

执行此操作的代码如下:(主要检查 scrollFunc（） function）

The code to do it is this: (mostly check the scrollFunc() function)

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的顶部）然后重置页面位置它到底在哪里。可能不是一个理想的解决方案，但它可以完成工作。

The second two functions are just a cross-browser compatible way that I found of getting the current scroll position of a page. So what this does is find an element (presumably within a scrollable div), gets the current scroll position of the page, scrolls the element into view (which will put it at the top of the scrollable div) and then resets the page position back to where it was. Probably not an ideal solution, but it will get the job done.

这篇关于滚动到div中的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！