Video není dostupné.
Omlouváme se.
Um uso bem útil do CSS Scroll Snap
Vložit
- čas přidán 6. 08. 2024
- Curso gratuito de programação WEB
↪discover.maykbrito.dev
Descrição: Neste vídeo, aprenda como corrigir problemas de rolagem usando CSS e Scroll Snap. Vamos explorar passo a passo as técnicas necessárias para garantir que seu chat do CZcams exiba corretamente as mensagens, mantendo uma experiência de usuário fluida e eficiente. Ideal para desenvolvedores iniciantes e intermediários que desejam melhorar suas habilidades em design de interface e implementação de CSS avançado.
- [00:00]( • Um uso bem útil do CSS... ) 📝 O chat do CZcams apresenta mensagens que precisam começar na parte inferior para serem exibidas corretamente.
- [01:38]( • Um uso bem útil do CSS... ) 🛠️ Usar `position: absolute` pode criar um novo contexto no CSS, impedindo a rolagem se não configurado corretamente.
- [02:21]( • Um uso bem útil do CSS... ) 🧩 O uso do `scroll-snap` pode alinhar automaticamente o scroll ao final do conteúdo, facilitando a navegação.
- [04:29]( • Um uso bem útil do CSS... ) 🤔 Inverter a direção do `flex` pode ajudar o `scroll-snap` a entender o final como o início, ajustando o comportamento de rolagem.
- [05:37]( • Um uso bem útil do CSS... ) 🖥️ Configurar elementos pais e filhos com `scroll-snap` e `flex` inverso pode resolver problemas de posicionamento e rolagem no CSS.
- [11:01]( • Um uso bem útil do CSS... ) 🔄 Entender como o `scroll-snap` e `flex` invertido podem afetar a rolagem vertical e horizontal no CSS.
- [11:29]( • Um uso bem útil do CSS... ) 🤔 Nem sempre é fácil compreender o comportamento invertido de elementos no CSS, mesmo quando funciona corretamente.
- [11:56]( • Um uso bem útil do CSS... ) 🌀 O uso de `scroll-snap` com `snap mandatory Y` pode forçar a rolagem vertical para o topo, criando resultados inesperados na interface.
Mais conteúdo?
↪ maykbrito.dev
Como programar é incrível. Eu falo isso toda hora mas não tem como..
Eu acho divertido resolver esses problemas 😂
se o maykão não entendeu, eu não vou nem me arriscar
só sei que funcionou e ta valendo 😂😂
Lança uma trilha de Vue, Maykão?
Eu entendi que inverteu a caixa ai👍
Cara, vídeo muito top pra gente aprender algumas coisinhas mais escondidas do CSS kkkkkk.
O scroll snap é bem interessante mas provavelmente vai ser lido como um código "mágico" pela maioria dos devs mais inexperientes... No caso de uma lista de mensagens (ou itens) que deve iniciar sempre com o scroll no final, existe uma saída um pouco mais simples e com menos código. Basta criar um elemento que vai encapsular a lista, definir uma altura com alguma unidade de medida absoluta (qualquer uma que não seja %). Depois basta criar a lista sendo um flex box com orientação column reverse e adicionar um overflow y como automático. Algo como:
@@guilhermerillei acho que tentamos isso, mas teríamos que inverter a lista das mensagens (se entendi bem sua solução)
Salve, sou novo no canal. Onde que acontece essas lives?
@vitaobrabo Segundas e quintas às 10 e 01 da manhã. Aqui no youtube e no canal da twitch do Mayk.
@@eorafasantos Muito obrigado irmão. Tmj
Nao funcionaria legal se o scroll-snap-align fosse start a o invez de end ?
dai nao precisaria inverter a orientacao da caixa de fora
@@qweasd12391 não lembro se tentamos isso
😅 só usa o visualzador 3D do navegador gênio 😂😂
é aquilo né... se funciona, não mexe
kkkkkkk isso ahahha
CSS é coisa de doido mesmo....é mais fácil aprender javascript