0
170
ViewsManejar elemento editable detrás de otro elemento
Estoy trabajando en un proyecto donde implementa un editor de correo electrónico, algo así como el editor de Gmail. Tiene "Destinatarios y Asunto" siempre en la parte superior y el área del editor desplazable debajo. Entonces, lo que quiero lograr es:
- Deje que la parte superior permanezca siempre en la parte superior en una posición fija, incluso si estamos desplazando el contenido del editor a continuación
- Si el contenido del editor es demasiado largo, desplazar la página hacia abajo debería mover el contenido superior detrás de la parte superior. En este punto, si seguimos presionando la tecla "Arriba", debería recuperar el contenido oculto superior, en lugar de mover el cursor hacia arriba.
Tengo el gif a continuación para explicarlo mejor, con suerte:
Puedo lograr el primero usando la propiedad pegajosa, pero no puedo hacer el segundo. Si escribo contenido largo dentro del área del editor, lo oculto parcialmente en la parte superior, luego, si sigo presionando "arriba", eventualmente moverá el cursor al área superior, ocultando así el cursor, y no puedo traer el contenido oculto superior de nuevo usando la tecla "Arriba".
div.sticky { position: -webkit-sticky; position: sticky; top: 10px; background-color: yellow; padding: 50px; font-size: 20px; } <html> <div class="sticky">I will stick to the screen when you reach my scroll position</div> <div contenteditable="true"> </div> </html>1 answers
Answer question0
Utilizar el div pegajoso como un contenedor de texto podría ayudar, también escribí una pequeña función de ayuda para los descansos para probar la función de desplazamiento:
div.sticky { position: -webkit-sticky; position: sticky; top: 10px; background-color: yellow; padding: 50px; font-size: 20px; } <div class="sticky"> <input placeholder="Recipients"> <br> <input placeholder="Subject"> </div> <div contenteditable="true"> <script> for(var x=0;x<=100;x++){ document.write("<br>") } </script> <h1>test</h1> </html>