操作 DOM 时滚动条重置

Question

所以我有一个 js 函数，当从 <select> 元素中选择一个选项时会触发该函数。这个函数会触发一些 DOM 操作

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

How to prevent page's scroll position reset after DOM manipulation?

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

这是调用函数的表单元素：

<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
        }

Answer 1

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

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

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