当DOM被操纵时，滚动条会重置

scrollbar resets when DOM is manipulated

本文关键字：滚动条 DOM 操纵      更新时间：2023-09-26

所以我有一个js函数，当从<select>元素中选择一个选项时触发。这个函数触发一些DOM操作<不管出于什么原因，它每次都会让滚动条上升到顶部。这是令人沮丧的，因为我将旧的表单数据切换到ajax来避免这个问题。>

我研究了这个问题，发现了这个:

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

但是我不是从链接调用函数，而是在选择表单中的onchange事件，所以我不知道如何应用提供的解决方案。

下面是调用函数的form元素: 
<div id="imageTable">
   <form action="">
     <select onchange="getOption()" name="dir">
         <option value="Anotherguyly">Anotherguyly</option>
         <option value="Hello">Hello</option>
         <option value="page1">page1</option>
         <option value="pageish2">pageish2</option>
     </select>
   </form>
</div>

头文件中的js函数如下:

        function getOption() {
            var selectDOM = document.getElementById("imageTable").getElementsByTagName("select")[0];
            var i = selectDOM.selectedIndex;
            var selectedChoices = selectDOM.options;
            var selectedText = selectedChoices[i].value
            resetImageTable(selectedText);
        }
        function resetImageTable(option) {
              // clears out previous DOM elements, inserts new chosen by the provided option
        }

我怀疑答案在于执行的顺序。clears out previous DOM elements 非常可能影响有效滚动位置。

考虑将CSS visibility:hidden应用于所有当前图像，然后将它们替换为新加载的图像，而不是删除然后添加节点。如果新函数少于旧函数，则在函数调用结束时删除掉队的函数;如果新的比旧的多，那么在替换之后继续添加它们。

这种方法将导致最小的滚动位置变化

相关文章：