DOMを操作するとスクロールバーがリセットされる

Question

<select>要素からオプションを選択したときにトリガされるjs関数があります。この関数は、DOM操作の一部を起動します。何らかの理由でスクロールバーが毎回上に移動します。この問題を回避するために私の古いフォームデータをajaxに切り替えたので、これはイライラしています。

私はこの問題を調査し、この発見した：

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を適用してから、新しくロードされたイメージに交換してください。古いものより新しいものが少ない場合は、関数呼び出しの最後にstragglerを削除します。古いものより新しいものがある場合は、それらを置き換えずに追加し続けます。

このアプローチでは、スクロール位置の変更が最小限に抑えられます。