Как остановиться при прокручивании страницы прямо перед элементом

Question

У меня есть элемент на странице, когда я до него скролю, я хочу чтобы я остановился прямо перед ним. Однако, если я начинаю скролить от начала страницы, то к тому моменту когда я дошел до этого элемента, я либо не доскролил немного, или же при следующем прокручивании колесиком мыши он заходит на него. Можно как-то сделать так, чтобы обзор страницы остановился прямо перед ним? Подскажите пожалуйста.

.block-1{
 height: 2300px;
 width: 100%;
}
.block-2{
 height: 500px;
 width: 100%;
}
.block-3{
 height: 300px;
 width: 100%;
}


<div class="block-1"></div>
<div class="block-2" id="block-2"></div>
<div class="block-3"></div>


X
--------------------------------------   Когда доскролил,закрыло некотурую часть  
  |                               |      block 2 и если прокручу колесиком вверх, 
  |             block2            |      то, все равно будет не ровно по линии, и 
  |                               |      буден виден block1
  |_______________________________|


✔
--------------------------------------
   _______________________________      Когда доскролил, встало ровно по линии
  |                               |     (нужно так)
  |                               |
  |            block2             |
  |                               |
  |_______________________________|

Answer 1

Нашел нужные команды, получилось вот так:

let hook = document.getElementById("block-2");

window.onscroll = function() {
  if (window.pageYOffset > 390) {

    hook.scrollIntoView();//Вариант 1
    //window.scrollTo(0, 400); Вариант 2
  }
};

.block-1 {
  height: 400px;
  width: 100%;
  background-color: blue;
}

.block-2 {
  height: 200px;
  width: 100%;
  background-color: green;
}

.block-3 {
  height: 1000px;
  width: 100%;
  background-color: red;
}

<div class="block-1"></div>
<div class="block-2" id="block-2"></div>
<div class="block-3"></div>

Answer 2

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

const container = document.querySelector("body");
const targets = container.querySelectorAll(".block");

const options = {
	threshold: 0.5
};

const callback = (entries, observer) => {
	entries.forEach((entry) => {
		const image = entry.target.querySelector("img");
		const isIntersecting = entry.isIntersecting;
		gsap.to(image, 0.5, {
			opacity: isIntersecting ? 1 : 0.5,
			width: isIntersecting ? "100%" : "50%",
			height: isIntersecting ? "100%" : "50%"
		});
		if (isIntersecting)
			entry.target.scrollIntoView({
				behavior: "smooth"
			});
	});
};

observer = new IntersectionObserver(callback, options);
targets.forEach((target) => {
	observer.observe(target);
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container .block {
  height: 150vh;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
}
.container .block img {
  object-fit: cover;
  object-position: center;
  width: 50%;
  height: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<div class="container">
	<div class="block">
		<img src="https://i.picsum.photos/id/115/1000/500.jpg" alt="">
	</div>
	<div class="block">
		<img src="https://i.picsum.photos/id/116/1000/500.jpg" alt="">
	</div>
	<div class="block">
		<img src="https://i.picsum.photos/id/117/1000/500.jpg" alt="">
	</div>
</div>

БЛОГ НА HUSL

Как остановиться при прокручивании страницы прямо перед элементом

Ответы (2 шт):