Question

所以我有一个js函数，当从<select>元素中选择一个选项时会触发该函数。该函数触发一些DOM操作＆lt;无论出于何种原因，它都会使滚动条每次都击中顶部。这很令人沮丧，因为我将旧的表单数据切换到ajax以避免此问题。

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

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

但是我没有从链接中调用该函数，而是在select表单中调用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应用于所有当前图像，然后将它们交换为新加载的图像，而不是删除然后添加节点。如果新旧比旧的少，则在函数调用结束时删除straggler;如果有更多的新旧，那么继续将它们添加到更换之外。

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

操作DOM时滚动条重置

1 个答案: