当前位置:  开发笔记 > 编程语言 > 正文

DOM操作后如何防止页面的滚动位置重置?

如何解决《DOM操作后如何防止页面的滚动位置重置?》经验,为你挑选了1个好方法。

我有两个JS函数,一个是为选择框添加选项

function addOption(selectId, text, value) {
    var selectbox = document.getElementById(selectId);
    var optNew = document.createElement('option');
    optNew.text = text;
    optNew.value = value;
    try {
        selectbox.add(optNew, null); //page position resets after this
    }
    catch(ex) {
        selectbox.add(optNew);
    }    
}

另一个在类似的简单函数中执行document.getElementById(formId).appendChild(newHiddenInput).

它们都工作,元素按预期添加.但是,在调用它们中的任何一个时,页面将其滚动位置重置为IE6和FF中的页面顶部.没有回发,这纯粹是客户端操纵.我在Firebug中设置了断点,它在element.appendChild或select.add执行后立即发生.我知道我可以使用JS来手动设置滚动位置,但是当页面没有被重新渲染时我认为没有必要.

我不是JS或DOM的专家,所以我很可能会遗漏一些东西,但我看过这里并通过Try it Here选项运行他们的示例,我无法复制问题,表明代码库我与之合作是罪魁祸首.

任何想法为什么滚动位置被重置?如果它提供了更好的替代方案,我也可以使用jQuery.



1> Yuval Adam..:

如果从链接调用函数,则链接中可能包含内部锚点:

http://www.website.com/page.html#

这导致了所述行为.默认行为是,如果锚不存在,页面滚动位置将跳转到顶部(scrollTop = 0).

如果在每个函数调用中都发生这种情况而不管源是什么,那么这可以从列表中划掉.


这不是(必然)解决方案,但可能在您的情况下.为了将来参考,当使用锚标记时,您通常需要一个有效的href,但可能不希望实际上它在任何地方,因为您使用javascript抢占行为.那时你需要使用"return:false;"
推荐阅读
小色米虫_524
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有