Fala pessoal, tenho uma aplicação WEB que é composta por várias “section” uma abaixo de outra, cada section representa uma página fullscreen e tenho uma função que é um loop que fica rolando a página para baixo e para cima infinitamente, a rolagem respeita o limitante das section baseado na altura do monitor do usuário. Mais abaixo disponibilizarei o código, caso queiram me dar sugestões para melhorá-lo ok, vamos a ajuda que preciso.
Preciso implementar 2 botões nas section sendo “Pausar” e “Ligar”, ao clicar em “Pausar” deve parar o setTimeout que executa a função de rolagem da página e caso eu clicar em “Ligar” retoma a função rolando novamente a página continuando de onde parou.
Abaixo o código:
<script>
//Rolagem automática da página
var secoes = document.getElementsByClassName('section-slider').length
var altura = document.documentElement.scrollHeight;
var rolar = 0;
var status = 0;
slide();
function slide() {
setTimeout(slide, 3000);
if (status == 0) {
rolar = rolar + (altura / secoes);
if (rolar >= altura) {
status = 1;
rolar = rolar - ((altura / (secoes) * 2));
}
} else {
rolar = rolar - altura / (secoes);
if (rolar < 0) {
window.location.reload(true);
status = 0;
rolar = 0;
}
}
//Rola o scroll até a próxima seção
window.scrollTo(0, rolar);
}
</script>
**Esta tudo funcionando perfeitamente ok, apenas quero fazer esta melhoria de o usuário poder pausar e retomar a rolagem da página.**Por favor podem me ajudar como fazer este pause/ligar dentro desta função que já está funcionando ou caso queiram disponibilizar um outro código agradeço, pois confesso que este apesar de funcionando parece meio complicado kkkk