tools - title html attribute

La edición de un elemento de entrada adhesivo en Chrome hace que la página se desplace hacia la parte superior

Question

Estaba intentando usar la position: sticky css position: sticky en uno de mis proyectos personales cuando noté que al tener elementos editables como campos de entrada o áreas de texto en el interior, la página se desplaza hacia la parte superior.

Realmente me gustaría eliminar este comportamiento si es posible.

.container {
height: 5000px;
}
.heading{
background: #ccc;
height: 50px;
line-height: 50px;
margin-top: 10px;
font-size: 30px;
padding-left: 10px;
position: -webkit-sticky;
position: sticky;
top: 0px;
}

<h1>Lorem Ipsum</h1>
<div class="container">
<div class="heading">
<input placeholder="Edit this while scrolling...">
</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
</div>

Answer 1

He logrado que funcione, pero probablemente no sea la mejor solución.

1. Agregar agregar ya sea overflow: auto o overflow: hidden a la clase con position: sticky .
2. Quitar el placeholder de placeholder de <input> .

No estoy seguro de por qué agregar un overflow o quitar el placeholder hace funcionar, tal vez alguien pueda ayudar a explicar esto.

.container {
height: 5000px;
}
.heading{
background: #ccc;
height: 50px;
line-height: 50px;
margin-top: 10px;
font-size: 30px;
padding-left: 10px;
position: -webkit-sticky;
position: sticky;
top: 0px;
overflow: auto;
}

<h1>Lorem Ipsum</h1>
<div class="container">
<div class="heading">
<input>
</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
</div>

Answer 2

Tendrá que hacer una validación de la clave; probablemente sea mejor con una verificación de expresiones regulares para confirmar los caracteres aceptables, pero puede llamar a una función javascript desde la pulsación de la tecla, actualizar el valor de la entrada y devolver el valor falso:

var e = document.getElementById(''input'');
e.onkeypress = myFunction;
function myFunction(t) {
document.getElementById(''input'').value += t.key;
return false;
}

.container {
height: 1000px;
}
.heading{
background: #ccc;
height: 50px;
line-height: 50px;
margin-top: 10px;
font-size: 30px;
padding-left: 10px;
position: -webkit-sticky;
position: sticky;
top: 0px;
}

<h1>Lorem Ipsum</h1>
<div class="container">
<div class="heading">
<input id="input" placeholder="Edit this while scrolling...">
</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
<div>Lorem Ipsum</div>
</div>