0

Tengo esto, que crea una scrollbar que pertenece al ej1:

let ej = document.getElementById("ej");
let ej1 = document.getElementById("ej1");
let ej2 = document.getElementById("ej2");
function se_acabo(){
  ej1.style.overflow="hidden";
  ej.style.height= ej1.scrollHeight + "px";//Esto lo puse para intentar que la scrollbar tuviese las mismas dimensiones que la anterior, pero a pesar de que funciona, no sale lo gris para que pueda moverla y así desplazarme por el cuadrado amarillo. Ademas de que no quiero que sea más grande que el height del cuadrado amarillo. 
  ej.style.width= ej1.scrollWidth + "px";
  ej.style.overflow="scroll";      
}
#ej1{
        height: 250px;
        width: 300px;
        background: yellow;
        overflow: auto;
        position: absolute;
    }
    #ej2{
       height: 100px;
       width: 100px;
       position: absolute;
       background-color: green;
        top: 220px;
    }
    #se{
        position: relative;
        top: 300px;
    }
    #ej{
        position: absolute;
        height:250px;
        width:300px;
    }
<div id="ej">
    <div id="ej1">
        <p id="ej2" draggable="true"></p>
    </div>
</div>
<button onclick="se_acabo()" id="se">Se acabo</button>

Pero lo que quiero es que al pulsar el botón desaparezca y se cree otra para ej pero con las mismas dimesniones que la scrollbar anterior, pero no puedo conseguirlo. Necesito modificar el tamaño de la "cosa gris" de dentro de la scrollbar para darle el tamaño de la otra scrollbar y que no ocurra lo que tengo actualmente. O algo parecido. ¿Se puede acceder a la "cosa gris"? Y sino, ¿ustedes como lo solucionarian?

Si no se entiende porfavor diganmelo!

Muchas gracias!

1 respuesta 1

1

No puedo añadir comentarios, asi que respondo por aquí.

No se entiende lo que quieres hacer. La scrollbar se puede modificar/estilar, aquí hay ejemplos (https://css-tricks.com/the-current-state-of-styling-scrollbars-in-css/).

Pero me da la impresión que no es lo que quieres hacer por lo que comentas sobre las mismas dimensiones de la scrollbar anterior y todo eso.

Cada contenedor puede tener scrollbar (horizontal y/o vertical) si añades las propiedades overflow-x y overflow-y, o overflow que añade tanto vertical como horizontal. Sin embargo, si no hay contenido dentro de un elemento, no abrá nada que scrollear, por lo que se verá el contenedor del scrollbar pero sin scrollbar que rodar. Esto lo digo porque al pulsar el botón, haces que 'ej1' pierda el scrollbar y se lo pones a 'ej'. Pero 'ej' tiene un elemento adentro de su mismo tamaño, por lo que no se verá la scrollbar. Mientras que 'ej1' tiene un elemento 'ej2' cuyo punto más bajo está a 100px + 220px (el top). Eso es 320px mientras que el height del su contenedor es 250px. Por eso se ve el scrollbar antes de pulsar el botón.

Como no sé lo que quieres hacer no te puedo ayudar mucho más que suponiendo cosas. Tampoco sé porque todo lo tienes posicionado de forma absoluta. Hice unos cambios de lo que creo que quieres hacer:

<body>
<style>
    #ej{
        position: relative;
        height:250px;
        width:300px;
        background: red;
        overflow: hidden;
    }
    #ej1{
        height: 250px;
        width: 300px;
        background: yellow;
        overflow-x: auto;
        position: relative;
    }
    #ej2{
        height: 100px;
        width: 100px;
        position: relative;
        background-color: green;
        top: 220px;
    }
    #se{
        position: relative;
        top: 20px;
    }
</style>
<div id="ej">
    <div id="ej1">
        <p id="ej2" draggable="true"></p>
    </div>
    <p>texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto </p>
</div>
<button onclick="se_acabo()" id="se">Se acabo</button>
</body>
<script>
    let ej = document.getElementById("ej");
    let ej1 = document.getElementById("ej1");
    let ej2 = document.getElementById("ej2");
    function se_acabo(){
        ej1.style.overflow ="hidden";
        ej.style.overflowY ="scroll";
    }
</script>

 

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.