Tengo 3 cuadrados, uno naranja, uno azul y otro morado. El cuadrado azul se mueve con el morado pero al moverlo hacia abajo hay un punto en el que se crea una scrollbar y el cuadrado azul no se sale del naranja, pero el morado si se sale porque no esta dentro del naranja. Lo que quiero es que el cuadrado morado no se salga del naranja. Y para ello pensé en bajar la scrollbar automáticamente y así que no se salga porque cuando bajo la scrollbar me muestra el cuadrado morado dentro del naranja. Este es mi código:
let a = document.getElementById("ej1");
let b = document.getElementById("ej2");
a.addEventListener("mousedown", moverelemento);
b.style.left = a.getBoundingClientRect().left + "px";
b.style.top = a.getBoundingClientRect().bottom - 66 + "px";
document.getElementById("ej").addEventListener("scroll", encuadrar);
function encuadrar(){
b.style.left = a.getBoundingClientRect().left + "px";
b.style.top = a.getBoundingClientRect().bottom - 66 + "px";
}
function moverelemento(e) {
const X = e.clientX - a.getBoundingClientRect().left;
const Y = e.clientY - a.getBoundingClientRect().top;
a.ondragstart = function () { return false; }
function mover(pageX, pageY) {
a.style.left = pageX - X + 'px';
a.style.top = pageY - Y + 'px';
b.style.left = a.getBoundingClientRect().left + "px";
b.style.top = a.getBoundingClientRect().bottom - 66 + "px";
}
function posicionar(event) {
mover(event.pageX, event.pageY);
}
window.addEventListener('mousemove', posicionar);
window.addEventListener('mouseup', eliminar);
function eliminar(e) {
window.removeEventListener('mousemove', posicionar);
}
}
#ej {
height: 200px;
width: 400px;
background: orange;
overflow: auto;
position: absolute;
}
#ej1 {
height: 100px;
width: 100px;
position: absolute;
background-color: blue;
top: -16px;
}
#ej2 {
background-color: purple;
position: absolute;
width: 50px;
height: 50px;
}
<div id="ej">
<p id="ej1"></p>
</div>
<p id="ej2"></p>
Encontre que existía esto: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo para hacer que la scrollbar se desplazase y así evitar que el cuadrado morado se saliera. Pero intentando ponerlo en mi código sigue sin hacer lo que yo quiero.
Si no se entiende porfavor díganmelo. Muchas gracias.
position: fixed
en css