Сначала scrollIntoView принимает Boolean или опции Object. Я не знаю, что top должно быть, потому что это не в вашем коде, но это не правильно.
Ваше событие прокрутки постоянно срабатывает и отменяет ваше scrollIntoView. Чтобы остановить это, вы можете установить свойство контейнера overflow, чтобы оно больше не позволяло прокручивать, отключать событие, а затем повторно включать его с помощью таймера непосредственно перед вызовом scrollIntoView.
entries.forEach(entry => {
if (entry.isIntersecting == true) {
console.log(entry.target.offsetTop);
document.body.setAttribute('style','overflow:hidden;');
setTimeout(function(){
document.body.setAttribute('style','overflow:visible;');
entry.target.scrollIntoView(true);
}, 250);
}
Пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
position: absolute;
-ms-overflow-style: none;
display: block;
height: 100vh;
width: 100%;
}
body::-webkit-scrollbar {
width: 0 !important;
}
.page {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="page">one</div>
<div class="page">two</div>
<div class="page">three</div>
<div class="page">four</div>
<script>
const pages = document.querySelectorAll('.page');
const observer = new IntersectionObserver(
entries => {
entries.forEach(entry => {
if (entry.isIntersecting == true) {
console.log(entry.target.offsetTop);
document.body.setAttribute('style','overflow:hidden;');
setTimeout(function(){
document.body.setAttribute('style','overflow:visible;');
entry.target.scrollIntoView(true);
}, 250);
}
});
},
{threshold: 0.10},
);
pages.forEach(page => {
observer.observe(page);
});
</script>
</body>
</html>
Примечание Вероятно, есть лучшие способы сделать это без таймера - например, флаг в закрытии, и т. Д. c, но это должно дать вам представление о том, что является причиной проблемы и как ее обойти.