Feat/scroll to top #266
Feat/scroll to top #266
Conversation
| }; | ||
|
|
||
| const scrollToTop = () => { | ||
| console.log('scroll top'); |
|
|
||
| const toggleVisibility = () => { | ||
| const scrolled = document.documentElement.scrollTop; | ||
| if (scrolled > 300) { |
There was a problem hiding this comment.
De onde veio esse valor? Vai funcionar tanto para desktop como dispositivos móveis?
There was a problem hiding this comment.
quantidade de pixels que a pagina tem que ser rolada para aparecer o botao
There was a problem hiding this comment.
Eu entendi que era isso. Minha pergunta foi sobre como você chegou até o entendimento que 300 é o melhor valor a ser usado.
There was a problem hiding this comment.
foi apenas testando os valores e esse foi o que encaixou melhor
| return ( | ||
| <div className={cn('fixed bottom-24 right-8 hidden md:block', className)}> | ||
| {isVisible && ( |
There was a problem hiding this comment.
Não seria melhor não renderizar nada caso não fosse necessário?
There was a problem hiding this comment.
entao o botao so aparece en telas maiores do que 1024px, para celular ele nao aparece
There was a problem hiding this comment.
Tem alguma motivação? Para celulares, exatamente por ter telas menores, essa função parece ser ainda mais importante, já que a rolagem lá fica bem maior que no desktop.
There was a problem hiding this comment.
porem no celular voce consegue rolar dando duas jogadas de dedo para cima, ne minha visao no celular é mais facil de rolar a pagina e no computador nao
|
Para celular ele nao renderiza
…On Sun, May 19, 2024, 14:13 Luciano Lima ***@***.***> wrote:
***@***.**** commented on this pull request.
Coloca prints, gif ou vídeo de como vai funcionar e também como fica no
caso de celulares e tablets.
------------------------------
In src/components/ScrollToTopButton/ScrollToTopButton.tsx
<#266 (comment)>:
> +
+const ScrollToTopButton = forwardRef<HTMLButtonElement, IScrollToTopButton>(
+ ({ className = '', ...rest }, ref) => {
+ const [isVisible, setIsVisible] = useState(false);
+
+ const toggleVisibility = () => {
+ const scrolled = document.documentElement.scrollTop;
+ if (scrolled > 300) {
+ setIsVisible(true);
+ } else if (scrolled <= 300) {
+ setIsVisible(false);
+ }
+ };
+
+ const scrollToTop = () => {
+ console.log('scroll top');
Ficou esquecido aqui
------------------------------
In src/components/ScrollToTopButton/ScrollToTopButton.tsx
<#266 (comment)>:
> @@ -0,0 +1,45 @@
+import { useState, forwardRef } from 'react';
+import { IScrollToTopButton } from './types';
+import { cn } from '@/lib/utils';
+
+const ScrollToTopButton = forwardRef<HTMLButtonElement, IScrollToTopButton>(
+ ({ className = '', ...rest }, ref) => {
+ const [isVisible, setIsVisible] = useState(false);
+
+ const toggleVisibility = () => {
+ const scrolled = document.documentElement.scrollTop;
+ if (scrolled > 300) {
De onde veio esse valor? Vai funcionar tanto para desktop como
dispositivos móveis?
------------------------------
In src/components/ScrollToTopButton/ScrollToTopButton.tsx
<#266 (comment)>:
> + return (
+ <div className={cn('fixed bottom-24 right-8 hidden md:block', className)}>
+ {isVisible && (
Não seria melhor não renderizar nada caso não fosse necessário?
—
Reply to this email directly, view it on GitHub
<#266 (review)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AY7O5MDZPALRAOL4BGZXSY3ZDDMR5AVCNFSM6AAAAABH6M7646VHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDANRVGEYTMMBVGY>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
|
gif do funcionamento do botao:
|
Estou adicionando o botao de voltar para o top e resolvi junto ao Gilmar José o bug qua esta tendo de nao computar os valores de scroll, o problema esta no css global que no id root tinha o overflow hidden que nao deixava aparecer o scroll