我有一个绝对定位的 div,它充当页面中心的模式窗口。模式窗口可垂直滚动,右侧有一个滚动条。页面本身也可以垂直滚动,右侧有一个滚动条。
我希望能够单击链接并使模式窗口滚动到链接的项目。
我几乎可以使用 target.scrollIntoView(); 来实现这一点但整个页面与模式窗口一起滚动 - 我希望页面不会移动并且只有模式窗口滚动。
如果我使用scrollIntoView(false),页面本身不会滚动,而模式窗口会滚动,但目标元素位于窗口的底部,而我希望它位于顶部。
有什么方法可以手动偏移 div 中目标的位置吗?即,如果我使用scrollIntoView(false),目标将显示在div的底部 - 如果我可以将其偏移视图窗口的高度,我应该能够将其移动到顶部..?
注意:我不能为此使用 JQuery 等。
预先感谢您的任何帮助。
这是一个现场演示,我认为它可以满足您的需求:http://jsfiddle.net/QN3mK/ 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 的顶部),然后将页面位置重置回来到原来的地方。可能不是一个理想的解决方案,但它会完成工作。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)