es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo hacer desplazamiento vertical en contenido con desbordamiento.

21 Jul, 2023 Programación

Tengo un div donde el contenido desborda horizontalmente por defecto. ¿Cómo puedo hacer que haga scroll verticalmente? Aquí está mi HTML (estoy usando Tailwind):

<section class="flex flex-col lg:flex-row">
    <div class="w-full sm:w-3/4 lg:w-3/5 py-20 flex flex-col gap-y-10 items-center justify-center px-10">
        <div class="flex items-center justify-between w-full">
            <img src="https://img.icons8.com/ios/35/000000/add--v2.png" class="cursor-pointer mr-4">
            <input type="text" name="title" placeholder="Título" class="flex-1 border-0 outline-none placeholder-gray-600 text-4xl">
        </div>
        <textarea name="article" rows="10" placeholder="Cuenta tu historia..." class="flex-1 border-0 outline-none placeholder-gray-600 text-2xl w-full h-auto" id="input-html"></textarea>
    </div>

    <div class="w-full sm:w-1/4 lg:w-2/5 border-l-4 border-gray-400 p-5 overflow-y-scroll" id="output-html"></div>
</section>

El problema es que el segundo div hace scroll horizontalmente y no verticalmente.

¿Cómo puedo hacerlo verticalmente?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que el segundo div haga scroll verticalmente, debes agregar la clase overflow-x-hidden a él, lo cual ocultará cualquier contenido que desborde horizontalmente, y agregar la clase overflow-y-scroll, lo cual permitirá hacer scroll verticalmente.

    Aquí está el código HTML actualizado:

    <section class="flex flex-col lg:flex-row">
    <div class="w-full sm:w-3/4 lg:w-3/5 py-20 flex flex-col gap-y-10 items-center justify-center px-10">
        <div class="flex items-center justify-between w-full">
            <img src="https://img.icons8.com/ios/35/000000/add--v2.png" class="cursor-pointer mr-4">
            <input type="text" name="title" placeholder="Título" class="flex-1 border-0 outline-none placeholder-gray-600 text-4xl">
        </div>
        <textarea name="article" rows="10" placeholder="Cuenta tu historia..." class="flex-1 border-0 outline-none placeholder-gray-600 text-2xl w-full h-auto" id="input-html"></textarea>
    </div>

    <div class="w-full sm:w-1/4 lg:w-2/5 border-l-4 border-gray-400 p-5 overflow-x-hidden overflow-y-scroll" id="output-html"></div>
</section>

    Al agregar estas clases, el segundo div tendrá una barra de desplazamiento horizontal solo si el contenido desborda horizontalmente y una barra de desplazamiento vertical si el contenido desborda verticalmente.

Comments are closed.