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!