Rolagem Suave com apenas 1 propriedade CSS (Smooth Scroll)

Поділитися
Вставка
  • Опубліковано 20 сер 2024

КОМЕНТАРІ • 150

  • @osmarbritodasilva6546
    @osmarbritodasilva6546 3 роки тому +28

    Hj eh seu dia meu filhão
    Parabéns pelo seu niver.
    TE AMO!!

    • @maykbrito
      @maykbrito  3 роки тому +4

      TE AMO PAIZAUMMM 🥰

    • @eltonsantosoficial
      @eltonsantosoficial 3 роки тому +1

      @@maykbrito PARABENS MEU AMIGO!!!!!

    • @eltonsantosoficial
      @eltonsantosoficial 3 роки тому +3

      Parabens pro senhor que criou um filho tao maravilhoso, que orgulho, que criação que o senhor deu. Deus abençoe a sua vida!!

  • @dharuanluigi
    @dharuanluigi 3 роки тому +11

    Meu deus Mayk, acho incrível como você ensina mano. Eu entro pra aprender algo e acabo aprendendo bem mais, tipo esses atalhos do emmet que eu nem fazia ideia velho!! Que demais, conteúdo sem palavras! Abraço meu velho!

  • @tiagoryan6599
    @tiagoryan6599 3 роки тому +13

    eu batendo a cabeça para fazer scrooll no javascript, e vem o mayk brito e resolve isso em menos de 1 minuto, incrível!

  • @thiagosilva-lz3kk
    @thiagosilva-lz3kk 5 місяців тому +2

    Cara valeu. Muito da hora a maneira como você explica.

  • @carloslucas909
    @carloslucas909 2 роки тому +2

    Cara, só tenho uma palavra pra você que é Incrível. Simplesmente seus conteúdos são incríveis, você tem uma boa comunicação e clareza na hora de explicar e torna alguns assuntos de programação simplesmente interessantes e até mesmo divertido de se desenvolver. Parabéns pelo vídeo.

  • @adrianobecconunes2245
    @adrianobecconunes2245 2 роки тому +2

    Top. Era isso que precisava para fazer um projeto de Landing Page para um curso!!! Valeu Mayk... Explicação e conteúdo sensancional!

  • @iasmincarqueija6133
    @iasmincarqueija6133 10 місяців тому +1

    Mayk, cara, eu achei que era algo complexo! Tentei várias coisas e nada. Nossa... muito obrigada!

  • @matheussoares6742
    @matheussoares6742 6 місяців тому

    Top a dica, pra iniciantes como eu...Didadica muito simples e direta

  • @rotassulnordestefrios829
    @rotassulnordestefrios829 3 місяці тому

    cara. esta de parabéns. coisas simples e funcional... que conteúdo top! mais um inscrito pose

  • @recieirecarbelim2722
    @recieirecarbelim2722 3 роки тому +1

    Que legal Mayk, o aniversário é seu e quem ganha somos nós! Valeu!

  • @idrissj.ssatende9046
    @idrissj.ssatende9046 2 роки тому

    Cara, tu é de mais! Ganhou mais um inscrito!
    Escrevo a partir de angola!

  • @GRUNGENTA
    @GRUNGENTA 2 роки тому

    Cara, brigadão! Primeiro video que abri e algo tão simples, fiquei feliz! hahaha

  • @wallamesmsb
    @wallamesmsb Рік тому +1

    Estava procurando isso a um tempo mas não sabia como pesquisar e cai aqui por acaso kkkkk muito bom

  • @alineperella7054
    @alineperella7054 7 місяців тому

    Sensacional! Me ajudou muito 😁

  • @osmoura123
    @osmoura123 3 роки тому

    A prática e conhecimento leva a perfeição, pro Mayk, fica fácil.. explicar coisas que ficamos quebrando a cabeça..

  • @eltonsantosoficial
    @eltonsantosoficial 3 роки тому +1

    Mayk!!!!!!!!!!! Vi agora e ja vou utilizar!! Mayk, mais sugestão de conteudo ai c escolhe o q vc acha melhor: - Mais aulas sobre layout responsivo, flex ou grid. - Inspirações para construir layouts bonitos. - Video falando sobre Skeleton Loading. - Como documentar bem seu README. - Fazer um form de busca com auto complete (fazia isso com jquery/ajax no passado). Falar sobre algum framework CSS q c usa/recomenda, bootstrap, material, sei la... Bom, sao minhas sugestoes, dps tem mais kkkkkkkkk abração!!!

  • @user-kk4wh4dv8o
    @user-kk4wh4dv8o 3 роки тому +9

    Podia mostrar fazendo em js pra funcionar no safari

    • @bernardo1496
      @bernardo1496 3 роки тому +1

      Nunca vi alguém fazendo com js puro. Sempre com jQuery. Ninguém sabe como fazer com purinho? 🤔

  • @rafaellmourasilva
    @rafaellmourasilva 3 роки тому

    Maycão seu método de ensino é top eu venho acompanhando seus vídeos na Rocketseat fazendo a jornada do Discovery que na verdade eu conheci mês passado através de um vídeo aqui do seu canal sobre os commits atomicos no VSCode e que eu fiquei encantado. Sou iniciante na área estou no segundo semestre de ADS pela FATEC e realente o seu trabalho e da equipe da Rocket é sensacional; tenho 37 anos, estou desempregado no momento casado e com uma filha linda pra criar e quero muito fazer minha transição de carreira para a área de TI e acho que você foi muito importante para que eu não desistisse de continuar tentando. Vocês sabem como transformam a vida de muita gente e eu já indiquei pra todo mundo a Rocket e acho que é uma pequena forma de contribuir com o trabalho de vcs acho que ainda estou cru pra NLW, más mesmo assim vou participar e procurar aprender o máximo possível com essa equipe incrível. Parabéns e muito, muito obrigado.

    • @maykbrito
      @maykbrito  3 роки тому

      Grande Rafa!! Que história massa!! É só o inicio de uma jornada top maninho. Essa NLW, na missão Origin, estaremos fazendo um projeto bem bacana para seu portfólio e com princípios básicos. Super dá pra você acompanhar. Te espero lá

  • @EduardoMlkchato
    @EduardoMlkchato 3 роки тому +6

    Eu não tava conseguindo e tinha certeza que não tinha a ver com o código. Aí dei uma lida no Stack overflow e achei isso "chrome://flags/#smooth-scrolling". Você coloca isso na url do navegador e nas opções vcs colocam "Enable" e funciona normalmente

    • @codedropsjs9633
      @codedropsjs9633 3 роки тому

      vc usa o Edge?

    • @jansennalim3501
      @jansennalim3501 3 роки тому +1

      Fiz aqui no Edge e deu certo também. Obrigado!

    • @jonathanbaer8198
      @jonathanbaer8198 2 роки тому

      krl god demais

    • @raquelstefany
      @raquelstefany 2 роки тому

      Tks♥

    • @diogofernandoj
      @diogofernandoj 2 роки тому

      o jeito q eu aprendi por javascript tb usa o behavior smooth mas tem esse mesmo problema, tem outro método q funcionaria por padrão nos navegadores?

  • @Dyprodbeats
    @Dyprodbeats Рік тому

    sério, que vídeo gostoso >

  • @UPerfil1
    @UPerfil1 Рік тому

    Sensacional, excelente didatica e conteudo, Mayk!!!!

  • @BOKOGamer
    @BOKOGamer Рік тому

    Perfeito! kkk Valeeeu, man!

  • @DeadpoolRodrigues
    @DeadpoolRodrigues Місяць тому

    Para a galera de 2024, atualmente está função está compatível com todos os navegadores 🙌🙌🙌

  • @rodrigoserrasqueiro
    @rodrigoserrasqueiro Рік тому +2

    Cara, eu tenho que te dar os parabéns, sério. A galera complica o simples. Assiste um video de 20 min fazendo altos comandos em JS pra ter o mesmo efeito. Ainda bem que antes de por em pratica assisti seu video, me economizou um tempão.

  • @rodrigorodrigues9030
    @rodrigorodrigues9030 3 роки тому

    Só gostaria de dizer duas palavras "PARA" "BENS" !!!
    ( Serio me ajudou muito no trabalho da facul, Muito obrigado de coração!!! + 1 inscrito)

  • @luanramalho8174
    @luanramalho8174 2 роки тому

    Muito obrigado. Mayk Brito sempre salvando nós.

  • @aloissailer
    @aloissailer 3 роки тому

    Caro Mayk, acabei de fazer a NLW contigo. Consegui terminar nosso projeto, ainda sem terminar os desafios. Está bem puxado, mas quero levar seu bom astral como combustível para continuar com foco e praticando. Comecei no Discover e vou aproveitar seus vídeos aqui também. Abraço grande! Você é demais !!!!!

    • @maykbrito
      @maykbrito  3 роки тому +1

      SENSACIONAL 🚀 Bora pra cima!

  • @jonatandeoliveira5701
    @jonatandeoliveira5701 3 роки тому

    ainda bem que achei esse video antes de começar a mexer com o JS, vlw cara, ótima dica

  • @wilsonguilherme1996
    @wilsonguilherme1996 Рік тому

    muito obrigado cara, me ajudou muitissimo !!! um grande abraço, Força !!!

  • @Casadossitesam
    @Casadossitesam 3 роки тому

    MEU PROFESSOR, muito 10 essa dica..... força e traga muito mais

  • @CarlosHenrique-rl6xk
    @CarlosHenrique-rl6xk 10 місяців тому

    Nossa!! Muito obrigado, vc me salvou! Tava tentando fazer essa mesma funcionalidade em javascript, tava levando uma coça kkk, cheio de codigos!

  • @marciorobertooshiro6297
    @marciorobertooshiro6297 Рік тому

    Salvo o dia, valeu

  • @rodrigoo_ferreira
    @rodrigoo_ferreira 3 роки тому

    Obrigado pela dica, Maykão!

  • @OCanaldoRoos
    @OCanaldoRoos 3 роки тому

    bom demais, gostei do vídeo curto, prático e eficiente.

  • @IsaiasNhantumbo
    @IsaiasNhantumbo 3 роки тому

    Seria o vídeo mais curto 😂😂😂 do Maykão... Um Abraço de Moçambique.

  • @venommotorrockerbass
    @venommotorrockerbass 3 роки тому

    Show, tem ajudado muitos os iniciantes, valeu Mayk.

  • @adriano5811
    @adriano5811 3 роки тому

    O maluco é brabo.

  • @tonalmeida6023
    @tonalmeida6023 3 роки тому

    Nota 1000🚀💪

  • @gabrielsartorato2859
    @gabrielsartorato2859 3 роки тому

    Mayk Brito, o melhor com certeza!

  • @fabioverlaine7274
    @fabioverlaine7274 2 роки тому

    Cara que show... sua didática é ótima. Valeu ✌

  • @alaelciolucas6838
    @alaelciolucas6838 3 роки тому

    parabéns cara gostei muito do mini-video-me que você desenvolveu, eu até baixei para testa aqui em casa fico praticando as aulas ai coloca minha cara na frente do visual studio code muito show!!!

    • @maykbrito
      @maykbrito  3 роки тому

      Que massa que curtiu brother!! TMJ ✌🏽

  • @alanmoreira5194
    @alanmoreira5194 2 роки тому

    O brabo dos brabos 💪🏽

  • @joaovictormansur3710
    @joaovictormansur3710 Рік тому

    deixou forte, paizao

  • @djamilacorreia
    @djamilacorreia Рік тому

    Muito obrigada pela sua ajuda amigo.

  • @brunooliveira8209
    @brunooliveira8209 3 роки тому

    Top cara parabéns , Deus abençoe por compartilhar seus conhecimentos

  • @anapolezi6288
    @anapolezi6288 Рік тому

    Incrível! Muuuito obrigada!!!

  • @walisonteodoro2726
    @walisonteodoro2726 3 роки тому

    mayk te amo

  • @wesleydcm
    @wesleydcm 3 роки тому

    Obrigado pela dica irmão!! grande abraço!

  • @nelson.costa.dev2536
    @nelson.costa.dev2536 3 роки тому +1

    Como sempre muito massa, maykão cara eu hoje descobri o place-content: { e values } que é muito top tambem, vc poderia fazer um vídeo falando sobre ele ( place-content ).

    • @nelson.costa.dev2536
      @nelson.costa.dev2536 3 роки тому +2

      Olha só outra coisa que eu descobri que é fantástico. background-color: ai vc passa o exadecimal #000000 com 6 e mais dois #00000050 o cinquenta 50 equivale a 50% de opacidade caaracas véi isso é muito massa.

    • @EduardoBarros13
      @EduardoBarros13 3 роки тому

      @@nelson.costa.dev2536 valeu a dica! Hahahaha

    • @nderXP
      @nderXP 3 роки тому

      @@nelson.costa.dev2536 Caraca, eu não sabia que dava pra fazer assim :O
      Muito massa!
      Eu sempre usei o rgba pra cores com opacidade, o que não é errado, eu acho... 😳

  • @charlesm9910
    @charlesm9910 3 роки тому

    Top.... Essa semana tive que fazer isso, e foi com JS.... Bom agora aprendi uma nova maneira, quem sabe até altere isso no meu projeto. Vlw Maykão

  • @crazydayne
    @crazydayne 2 роки тому

    Obrigada, Mayk!!! Eu estava quebrando a cabeça pra aprender a fazer isso no JS. Kkkkkk...

  • @analisedesenvolvimento9469
    @analisedesenvolvimento9469 2 роки тому

    Valeu demais, me ajudou com o trabalho da facul.

  • @brunotdantas
    @brunotdantas Рік тому

    Legal a dica Mayk, achei que no fim você ia mostrar como fazer em javascript :v

  • @DaniWeoz
    @DaniWeoz 2 роки тому

    LIKE DEMAIS!

  • @Gustavoferreira73
    @Gustavoferreira73 2 роки тому

    Mano eu estava quebrando a cabeça aqui, nem imaginei que era tão simples .

  • @eduardoprates8701
    @eduardoprates8701 2 роки тому

    Incrível meu mano vlw pelo conteudo muito top tmj

  • @may_com3831
    @may_com3831 3 роки тому

    Peguei dois inside, o gap e o scroll-behavior. Muito maneiro!

  • @wallysontransformers
    @wallysontransformers 2 роки тому +1

    eu não consegui fazer o scroll-behavior no Chrome, alguem tem alguma sugestão ?

  • @matheusthiesen3443
    @matheusthiesen3443 3 роки тому

    Exelente !

  • @marcioalves9865
    @marcioalves9865 3 роки тому

    Show de Bola

  • @niltonduarte3531
    @niltonduarte3531 Рік тому +1

    Pronto! Acabaram-se os problemas!

  • @viniciushenriquesponchiado7324
    @viniciushenriquesponchiado7324 3 роки тому

    Tu me salvou num nivel irmão, só agradeço

  • @spartakinho
    @spartakinho 3 роки тому +1

    Sensacional ❤️

  • @wesleybruno4241
    @wesleybruno4241 2 роки тому

    Toppp demais.

  • @ronyfonseca8871
    @ronyfonseca8871 2 роки тому

    boa cara vlw mesmo

  • @VictorSilvaDev
    @VictorSilvaDev 3 роки тому

    Muito top

  • @danielbarbosa8591
    @danielbarbosa8591 Рік тому

    manooooooooooooooooooooo muito obrigadooooooooooooooooooooooo caraca kkkkkkkkkkkkkkkkkkkkkkk pesquisei igual um doido cara kkkkk e vc me vem com esse css de merda kkkkkkkkkkkkkkkkkkkk Deus te abençoe cara, sério mesmo

  • @ewertonsilva9468
    @ewertonsilva9468 2 роки тому

    Coloquei isso em um site e funcionou perfeitamente, porém, toda vez que eu vou entrar na página, tipo eu fecho a aba, abro e entro no site a primeira coisa que ele faz automaticamente é rolar para uma div que eu coloquei lá em baixo, ignorando o inicio do site. Alguém sabe como resolver isso??

  • @daniellyvicente2674
    @daniellyvicente2674 Рік тому

    moço... obrigada!!!!! obrigada mesmo kkkkkkkkkk

  • @guilhermecolares2279
    @guilhermecolares2279 3 роки тому

    Muito bom professor

  • @lucafmerigui
    @lucafmerigui 3 роки тому

    Sugestão de vídeo: Fazer algum projeto do GitHub App Ideas ;)

  • @ficcaocentrifuga
    @ficcaocentrifuga 2 роки тому

    Excelente ! Parabéns!
    Estou procurando um jeito fácil de fazer um pushdown no meu site.
    Quando tiver a publicidade pushdown, o adserver vai inserir uma div logo abaixo do body, empurrando todo conteudo pra baixo (com fundo preto), mas gostaria que essa empurrada da tela fosse suave...

  • @weitonmatos9810
    @weitonmatos9810 2 роки тому

    Como esconder o menu quando rolar pra baixo mesmo usando o "fixed"?

  • @ellore295
    @ellore295 2 роки тому

    entrei no video e era um anúncio da rocketseat onde o próprio mayk tava apresentando akjaksjaks

    • @maykbrito
      @maykbrito  2 роки тому +1

      Aí, sim! O anúncio perfeito haha

  • @DanielBarretoDev
    @DanielBarretoDev 2 роки тому

    To vendo esse video 1 ano dps +- e os navegadores da apple safari ja suportam nativamente essa função

  • @guilhermemoraes4055
    @guilhermemoraes4055 3 роки тому

    Muito bom e simples
    Gostei muito

  • @luizaguedes3678
    @luizaguedes3678 2 роки тому

    uso sublime text, queria saber como se linka o css com o html

  • @setadr
    @setadr 3 роки тому

    Faz um video sobre seus métodos de estudo? Como por exemplo como foi estudar o electron pra fazer o vídeo, o processo de pesquisa e tudo mais...seria muito enriquecedor

    • @maykbrito
      @maykbrito  3 роки тому +1

      Anotado Sandro! Obrigado pela sugestão

  • @alexlanayt
    @alexlanayt 3 роки тому

    No Safari precisa de JS mesmo. Tem esse polyfill que resolve:

  • @brunosimoes5314
    @brunosimoes5314 Рік тому

    Fala Mayk
    Beleza ?
    Por favor, poderia me ajudar com uma dúvida.
    Estou fazendo um script, de webcraping em uma pagina aqui, mas cai em uma situação nova pra mim e não acho uma solução.
    Não entendo muito de web.
    Basicamente não estou conseguindo acessar os elementos que preciso, usando o BeautifulSoup.
    Parece que no html eles ficam “escondidos”. Os elementos que preciso acessar, só aparecem no html quando clica no “VER MAIS”.
    Quando abre a página normal, o fica class=“scroll-smooth” (não encontro os elementos que preciso com esse body).
    Quando clico no “Ver Mais” o html muda e o e fica class=“scroll-smoth ReactModal__Body-open”, aqui, ja conseguiria encontrar os elementos (estão no div, class=drawer), mas ao rodar os scripts, ele não raspa nesse html “alterado”.
    Pensei e testei uma alternativa usando o selenium, para interagir na página, clicando nesse botão “ver mais” e não tive sucesso. Ate encontrei o elemento e cliquei, mas não consegui usar o html “pós-click”.
    Objetivo: Quero por exemplo, todas as formas de pagamentos desse delivery, vou anexar em uma lista, que estou preparando de cada restaurante da região (será minha base de dados).
    Obrigado pelo conteúdo
    Tmj,

  • @ednetolls
    @ednetolls 3 роки тому

    Mayk, a um tempo tentei fazer um formulário com bootstrap, mas dividindo ele em vários passos tive alguns tropeços no caminho mas fiz, não ficou como quero mais funciona. Queria sugerir essa ideia para um vídeo só que com o CSS e js puro sem o framework bootstrap. Acho que seria legal ver.

  • @kaio.169
    @kaio.169 Рік тому

    Eu n tô conseguindo, alguém pode me ajudar pelo amor de deus ,e eu n entendo nd de Java, eu fiz td certinho, mas n vai ,ele vai seco só
    Obs: é em um template

  • @firminojoga9655
    @firminojoga9655 2 роки тому

    salvou haha

  • @kauemartins6123
    @kauemartins6123 Рік тому

    fazendo video pelado? kkkkkkk tmj salvou demais

  • @anselmosantos4955
    @anselmosantos4955 3 роки тому

    Show fera, faz um desse com js puro. Eu consegui fazer com jQuery.

  • @rafacharkman
    @rafacharkman Рік тому +1

    Kara, esse CSS não funciona no Edge também...sei que é uma mão na roda por ser simples, mas a não ser que a rolagem suave não seja importante no desenvolvimento do site usar esse metodo não é garantia de solucionar o problema.

  • @gabrielT93x
    @gabrielT93x Рік тому

    tem alguma forma de alterar o tempo do scroll, pra deixar mais ou menos rápido?

  • @Jack-ss4re
    @Jack-ss4re 5 місяців тому

    Não tá funcionando comigo, nem no Chrome e nem no Brave :/

  • @veggabriel
    @veggabriel 3 роки тому

    Vocês também fazem lista de navegação com lista ordenada? Tem um tempo que não faço dessa forma. Acredito que a maneira mais simples é uma lista de âncoras.

  • @IsmaelOnly
    @IsmaelOnly 3 роки тому

    Fala Mayk, cara, eu achava que só dava pra fazer isso com Javascript, é algo tão SIMPLES 😂 dsahudhsaudash Valeu 🤍

    • @maykbrito
      @maykbrito  3 роки тому +1

      Pois é!! Também fiquei super surpreso haha

  • @gabrielramosrochadel9220
    @gabrielramosrochadel9220 Місяць тому

    não está funcionando mais

  • @LucasSilva-wu8xu
    @LucasSilva-wu8xu Рік тому

    Irmão, aqui não ta funcionando não. Tentei no chrome e no Opera

  • @rivaldosouza362
    @rivaldosouza362 Рік тому

    Não sei porque cargas dagua no meu não funcionou, mas nao tem problema so a aula de emmet ja foi tudo.

    • @rivaldosouza362
      @rivaldosouza362 Рік тому

      Se mais alguem passou por esse problema minha solução foi a seguinte: joga esse link no nagegador chrome://flags/#smooth-scrolling e habilita a função Smooth Scrolling

  • @goodbr5772
    @goodbr5772 3 роки тому

    Gostei da aula

  • @EduardoBarros13
    @EduardoBarros13 3 роки тому +1

    Acho que nem fanboy da Apple deve usar Safari. Hahahah

  • @galavernag
    @galavernag 3 роки тому

    E pensar que fiquei procurando em toda internet para fazer isso e não conseguia.

  • @odevGabrielSilva
    @odevGabrielSilva 3 роки тому

    Mayk consegue ensinar uma forma de deixar o campo de texto textarea com um redimensionamento automático, dependendo do conteúdo dele? Igual as caixas de comentário do UA-cam, que crescem ou diminuem de acordo com o que você digita nelas. Seria um bom vídeo, né?

    • @maykbrito
      @maykbrito  3 роки тому

      Excelente dica Gabriel! Obrigado 😍

  • @zindev
    @zindev 2 роки тому

    Que site/ferramenta é essa que você utilizou, Maik?

  • @diltonneves6397
    @diltonneves6397 Рік тому

    kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk....... peraí....... faltou ar..... kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk

  • @anacarolinadias4361
    @anacarolinadias4361 2 роки тому

    Muito bom mesmo! Sabe se tem alguma forma de deixar essa transição um pouco mais lenta?