2

Tenho uma aplicação React que em determinadas situações (por causa do react-router) devo fazer um scroll até o topo da página. O problema é que na maioria dos casos o scroll deve ser animado e em algums casos específicos não.

Existe alguma forma de que eu possa forçar o scroll até o topo da página acontecer sem nenhuma animação?

Nota: como na maioria do código deve-se usar o scroll smoth eu tenho isso definido nos arquivos globais do meu SCSS:

html {
  scroll-behavior: smooth;
}

2 Respostas 2

3

Creio que behavior na API (scroll(), scrollBy() e scrollTo()) só tenha 2 valores possíveis, smooth e auto, então creio que

O mesmo vale para o CSS:

scroll-behavior: auto;
scroll-behavior: smooth;

Aparentemente o CSS scroll-behavior não tem compatibilidade com Safari, diferente da API conforme o caniuse, que é suportando apenas no Safari 13.1+ para MacOS (ou seja, não é suportado pelo iOS), portanto é melhor usar o API se o objetivo for ATIVAR, para desativar é irrelevante se o React usa o scroll-behavior: smooth;, já que provavelmente o smooth provavelmente não ocorre ou se ocorrer é algum polyfill usado (internamente, não sou experiente em React).

Então sendo como padrão o auto provavelmente vai depender de navegador para navegador, o que você pode experimentar é aplicar uma classe assim:

.behavior-auto {
    scroll-behavior: auto !important;
}

E aplicar dinamicamente ao elemento de interesse algo como:

document.documentElement.classList.toggle('behavior-auto', true)

E para remover:

document.documentElement.classList.toggle('behavior-auto', false)

Se desejar desabilitar de qualquer "elemento filho" talvez pode tentar:

.behavior-auto, .behavior-auto * {
    scroll-behavior: auto !important;
}

Mas é como eu disse, dependerá de navegador para navegador, apesar do MDN afirmar que o valor auto faz a rolagem em um único movimento.

4
  • A compatibilidade do js Options object e do Behavior css é a mesma
    – user201180
    Commented 11/08/2020 às 17:15
  • Olá caro @ruansenadev, poderia me esclarecer aonde eu disse que não era? Afinal eu não comentei de compatibilidade, o que eu disse é que AMBOS só possuiem o valor como AUTO, e AUTO se refere a um comportamento padrão, que pode ser até do user-agent. Compreende?
    – Syzoth
    Commented 11/08/2020 às 17:17
  • Fiz um comentário pra complementar..
    – user201180
    Commented 11/08/2020 às 17:44
  • 1
    @ruansenadev tem um detalhe para Safari de macOS vs Safari de iOS, resposta editada, não interfere para quem quer "desabilitar", já para quem deseja "ativar" a rolagem suave seria melhor então a API ao invés do CSS.... Claro que é preciso entender que tem comportamentos que são do sistema operacional e/ou algum polyfill como npmjs.com/package/smoothscroll-polyfill
    – Syzoth
    Commented 11/08/2020 às 17:59
1

Chame a função com valor de scrollOptions

window.scrollTo({top: 0, left: 0, behavior: 'auto'});

A compatibilidade do js Options object e do Behavior css é a mesma

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .