Soy nuevo en html y css. He visto esta pregunta muchas veces, pero parece que no puedo hacer que funcione para mi problema.

Tengo 3 etiquetas div. cuando el usuario desliza la etiqueta div superior, quiero que la etiqueta div inferior aumente su altura y haga que la página web se desplace. luego mueva todas las etiquetas div alineadas en la parte superior.

La razón por la que estoy haciendo esto es; esto hará que la página web que se ejecuta en un dispositivo móvil vaya a pantalla completa.

 <div id="backExpander" style="height: 100%; display: inline-block; position: relative;"> </div> <div id="canvasHolder" style="width: 100%; height: 100%;background-color: transparent;"> <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="0"></canvas> </div> <div id="swipeUpHolder" style="height: 100%; width: 100%; display:block;" > </div>

El script que estoy usando es;

 document.getElementById("swipeUpHolder").addEventListener('touchmove', onTouchMove, {passive: false}); function onTouchMove(e) { e.preventDefault document.getElementById("backExpander").style.height = "120%"; setTimeout((function() { document.getElementById("swipeUpHolder").style.display = "none"; window.scrollTo(0, 0); } ), 50); }

Como puede ver, estoy aumentando la altura del fondo div pero no hace nada.

si aumento la altura del div superior, esto funcionará

 document.getElementById("swipeUpHolder").style.height = "120%";

Pero quiero ocultar el div superior. use el div inferior para empujar la página para que se desplace.

¿Alguien puede dar algún consejo sobre cómo solucionar esto?