Как при событии scroll сделать прокрутку до необходимого блока?

Question

[Bembolat]

Ребят подскажите как реализовать на нативном js?
Функция плавного скролла у меня есть

spoiler

const anim = (sel, duration) => {
	let to = document.querySelector(sel).getBoundingClientRect().top,
      temp;
 
  return (sel) => {
      cancelAnimationFrame(temp); 
      var start = performance.now(); 
      var from = window.pageYOffset || document.documentElement.scrollTop;        
      requestAnimationFrame(function step(timestamp) {
          var progress = (timestamp - start) / duration;
          1 <= progress && (progress = 1);
          window.scrollTo(0, from + to * progress | 0);  
          1 > progress && (temp = requestAnimationFrame(step))
      });
  }

}

И она у меня работает например если вешаю на кнопку, но когда ставлю ее на событие скролла

document.addEventListener("scroll", anime(".last-block", 1000), false);

то у меня страница начинает плавно подниматься вверх и бесконечно тресется.

Comments

[Сергей delphinpro]

mousewheel вам нужен, а не scroll/
Для реализации smooth scrolling сам скроллинг обычно блокируется и имитируется другими средствами. А величина прокрутки определяется по событию кручения колесика мышки.

[Bembolat]

Сергей delphinpro, нужно чтобы для iPad тоже работало

[Сергей delphinpro]

Bembolat, для таччскринов обрабатываются тач события (touchstart/touchmove/touchend). В любом случае скролл в скролле будет зацикливаться. Это главное, что я хотел сказать.

[Bembolat]

Сергей delphinpro, а как тогда без скролла? например если в функцию поставить условие и в нем вызвать anim(), тo ничего не происходит

const moveScroll = setInterval(() => {
  var scroll = window.pageYOffset || document.documentElement.scrollTop;
  if (scroll < 400) {
  anim('.basics', 1000);
}
moveScroll();

Answer 1

[Alex]

Попробуйте прерывать событие самого скролла

Comments

[Bembolat]

Вы имеете ввиду event.stopPropagation() ?

[Alex]

Bembolat, Скорее preventDefault();

[Bembolat]

Александр Козак, не работает

Answer 2

[Игорь]

Может так, только наверное дописать функцию anime? без addEventListener("scroll"

button.addEventListener("click", function(e) {
  e.preventDefault();
  anime(".last-block", 1000);
}