Ok, esta es una pregunta inusual, pero he estado jugando con ella durante horas y no he tenido ningún progreso. ¡Espero que la comunidad SO pueda ayudar! 🤓
Aquí está la página web en cuestión: https://pifornerds.io/
Estamos usando este código para establecer dinámicamente la altura del fondo (los dígitos de pi que ves en gris) en función de la longitud del contenido de primer plano:
<script> // Dynamically set base height based on container contents var containerHeight = document.getElementById("container").offsetHeight; var baseHeight = document.getElementById("base").offsetHeight; if (baseHeight > containerHeight) { document.getElementById("base").style.height = containerHeight + "px"; } </script>Fragmento de CSS:
.layered { display: grid; justify-items: left; background-color: #222222; max-width: 1000px; margin: auto; height: auto; min-height: 100px; overflow: hidden; } .layered > * { grid-column-start: 1; grid-row-start: 1; } .base { font-family: "DejaVuSansMonoBold", courier; color: white; opacity: 0.1; max-width: 100%; height: 100%; word-break: break-all; margin-top: -3px; margin-left: 10px; margin-right: 10px; margin-bottom: 10px; position: static; z-index: 1; overflow: hidden; } .container { display: block; height: max-content; overflow: hidden; }Queríamos hacer esto para que no hubiera un montón de dígitos pi en el área del pie de página. Creemos que se ve "más limpio" de esta manera.
Sin embargo, el menú en la parte superior usa enlaces ancla para saltar al contenido que se encuentra más abajo en la página, por ejemplo:
<a href="#roadmap">Roadmap</a>
salta a:
<a id="roadmap"></a>
Ahora aquí está el problema...
Después de hacer clic en un enlace de anclaje del menú y luego intentar desplazarse hacia arriba en la página hasta la parte superior, no puede 🧐 ... porque de alguna manera la actualización de altura de Javascript anterior no lo permite.
Esto es lo más lejos que puedo desplazarme ahora, después de hacer clic en "Hoja de ruta":
¿Algunas ideas? ¡Gracias por adelantado! 😀
EDITAR: Aquí hay un violín: https://jsfiddle.net/imkane/kof83msy/4/ Por supuesto que funciona correctamente allí 😖
Debe eliminar el overflow: hidden; de .layered div. Probablemente sea mejor agregar overflow: hidden; a .base div, que es en el que establece la altura.