Pedro Muñoz Burgos
Preguntabuenas tardes, me sale el siguiente error, me podrían ayudar muchas gracias
Guillermo De Castro
Disculpen agrego una aclaracion mi comentario anterior que arreglaria el primer scroll que se visualiza en la pantalla: . Para solucionar el scroll del navegador, tendrias que sacar eliminar el .carousel { width: 100%;} o el padding:45px o colocarlo como .carousel {width:auto}. Porque lo que esta ocuriendo es que se le esta diciendo al navegador que el elemento carusel tenga un ancho del 100% y ademas tenga un padding de 30px lo que provoca que el carusel termine ocupando mas del 100% de la pantalla y eso te hace aparecer el segundo scroll horizontal.
Guillermo De Castro
Con overflow:auto(Solo se ven las barras cuando sea necesario) o eliminando la linea deberia ser suficiente. Lo que ocurre, que uno al colocar overflow: scroll, le esta diciendo al navegador que muestre el control de scroll tanto en la posicion X e Y aunque no exista overflow (Contenido del contenedor mas grande que el contenedor). Es decir overflow: scroll, seria lo mismo que escribir:
.selector { overflow-y:scroll; overflow-x:scroll; }
Mas info: Overflow-CSS
Pedro Muñoz Burgos
Ya listo, ya lo intento muchas gracias
Samuel Rosero
Hola Pedro, para quitarle el scroll pero no deshabilitarlo se usa el siguiente estilo: ::-webkit-scrollbar {display: none;}
y si solo quieres desactivar el scroll de esta seccion en especifico puedes hacer esto: .carousel::-webkit-scrollbar {display: none;}
Kevin J. Zea Alvarado
Intenté quitando el
width: 100%.carouselMe gustaría explicarte porqué funcionó así, pero no sé la respuesta.
Pedro Muñoz Burgos
Ya lo corregí, gracias Guillermo, pero me sigue saliendo el scroll de la parte de abajo justo arriba de la barra de tareas de Windows
Pedro Muñoz Burgos
listo ya lo corrijo muchas gracias
Guillermo De Castro
Hola pedro, como estas? Fijate que en la clase .carousel especificaste overflow:scroll, esto hace que te aparesca el scroll horizontal que estas viendo.
Pedro Muñoz Burgos
claro lo que pasa es que me sale las barras de abajo y se supone que no deberia salir eso
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Carrousel 1</title> </head> <style> body { margin: 0px; } .carousel { width: 100%; overflow: scroll; padding: 30px; position: relative; } .carousel__container { /* NOWRAP => todo en una misma linea */ white-space: nowrap; margin: 70px 0px; padding-bottom: 10px; } .carousel__item { background-color: palevioletred; width: 200px; height: 250px; border-radius: 20px; overflow: hidden; margin-right: 10px; display: inline-block; cursor: pointer; transition: 450ms all; transform-origin: center left; } .carousel__item:hover~.carousel__item { transform: translate3d(100px, 0, 0); } .carousel__container:hover .carousel__item { opacity: 0.3; } .carousel__container:hover .carousel__item:hover { transform: scale(1.5); opacity: 1; } </style> <body> <section class="carousel"> <div class="carousel__container"> <div class="carousel__item"> </div> <div class="carousel__item"> </div> </div> </section> </body> </html>
Kevin J. Zea Alvarado
¿Cuál es el error? 👀 ¿Qué debería salirte?
Y, de preferencia, compártenos tu código. Ahí es donde, muy probablemente, esté el error.
