0
312
ViewsEfecto de deslizamiento de estilo de correo electrónico (eliminar/leer)
Necesito agregar un efecto de deslizamiento de estilo de correo electrónico (eliminar / leer) como la imagen a continuación. Cambia a la izquierda para leer, desliza a la derecha para eliminar.
Tengo el concepto básico funcionando pero la acción de deslizamiento no es satisfactoria.
En mi demostración, tengo dos versiones, la parte superior funciona como se esperaba, parece que no puede omitir la diapositiva central para llegar a la diapositiva 1 o 3. En mi segundo ejemplo, he hecho las diapositivas izquierda y derecha solo 50px, cuando el usuario desliza rápido, salta la diapositiva del medio y muestra la primera diapositiva. Si el usuario se desliza hacia atrás, necesito que regrese solo al medio.
También necesito el segundo control deslizante para comenzar en la diapositiva 2. ¿Cómo puedo lograr esto o hay una mejor opción?
No me importa usar javascript siempre que no sea una biblioteca.
Vea abajo.
/* setup */ :root, body { height: 100%; display: flex; align-items: center; justify-content: space-between; flex-flow: column nowrap; font-family: monospace; } .container { display: flex; overflow: auto; flex: none; width: 100vw; scroll-snap-type: x mandatory; } .container2 { display: flex; overflow: auto; flex: none; width: 100vw; scroll-snap-type: x mandatory; scroll-snap-stop: always; } .container > div { text-align: center; scroll-snap-align: center; flex: none; scroll-snap-stop: always; width:100vw; height:100px; } .container2 > div { text-align: center; scroll-snap-align: center; flex: none; scroll-snap-stop: always; width:100vw; height:100px; } .container2 > div:nth-child(1), .container2 > div:nth-child(3) { width:50px; } /* coloration */ .container > div:nth-child(even), .container2 > div:nth-child(even) { background-color: #87EA87; } .container > div:nth-child(odd), .container2 > div:nth-child(odd) { background-color: #87CCEA; } .no-scrollbar { scrollbar-width: none; margin-bottom: 0; padding-bottom: 0; } .no-scrollbar::-webkit-scrollbar { display: none; } <div class="container no-scrollbar"> <div>1</div> <div>2</div> <div>3</div> </div> <div class="container2 no-scrollbar" style="margin-top:100px;" dir="ltr"> <div>1</div> <div>2</div> <div>3</div> </div>