Остановить автоматическую прокрутку при изменении содержимого страницы

У меня есть страница, которая добавляет и удаляет некоторый контент для себя в событии прокрутки.

Теперь, когда вы используете Chrome (у IE11, похоже, нет такого поведения), всякий раз, когда контент добавляется и удаляется на страницу, генерируется событие прокрутки (я думаю, чтобы сохранить постоянство просмотра клиента при изменении страницы).

Я не хочу этого. Событие прокрутки, сгенерированное при изменении содержимого, вызовет больше изменений в содержимом, что, в свою очередь, вызовет больше событий прокрутки.

Любые советы о том, как я могу остановить это поведение для всех браузеров? Мне не нужна автоматическая прокрутка. Я только хочу, чтобы прокрутка пользователя была зарегистрирована.

Вот несколько простых примеров кода. Нажатие кнопки «клик» приведет к перестановке цветных различий и сделает прокрутку страницы самостоятельно (в Chrome, а не в IE11) …

function removeStuff(){ var elem = document.getElementById("center"); document.getElementById("container").removeChild(elem); document.getElementById("container").appendChild(elem); } 
 #top { background-color: green; height:1500px; } #center { background-color: blue; height:1000px; } #bottom { background-color: red; height:1500px; } 
 

Это недавно добавленная функция Chromium, называемая привязкой к прокрутке.

Отключить в браузере: перейдите в chrome://flags/#enable-scroll-anchoring и установите «Scroll anchoring» на «Disabled».

Отключить через CSS:

 .some-element { overflow-anchor: none; } 

Я не думаю, что вы можете отключить это поведение, но вы можете обойти его. Поскольку Chrome выполняет событие scroll синхронно, когда вы вызываете removeChild , вы можете обнаружить эти типы событий прокрутки, установив глобальное значение boolean в true непосредственно перед removeChild и сразу же removeChild ему значение false .

 var isRemovingStuff = false; function removeStuff(){ var elem = document.getElementById("center"); // Chrome does a scroll here, set isRemovingStuff to true // so our scroll handler can know to ignore it. isRemovingStuff = true; document.getElementById("container").removeChild(elem); isRemovingStuff = false; document.getElementById("container").appendChild(elem); // TODO: set the scrollTop back to what you want it to be. } 

И ваш обработчик прокрутки будет выглядеть так:

 function onScroll() { if (isRemovingStuff) return; // Do cool stuff }