Кажется, что Firefox устанавливает для элемента ScrollTop элемента textarea значение ноль, если он не отображается, и неCSS

Разбираемся в CSS
Ответить
Anonymous
 Кажется, что Firefox устанавливает для элемента ScrollTop элемента textarea значение ноль, если он не отображается, и не

Сообщение Anonymous »

Я понимаю, что когда элемент DOM не отображается (или удаляется из DOM, но все еще находится в памяти, если это действительно разница), геометрия не может быть точно запрошена и часто возвращает нулевые значения.Однако при восстановлении в DOM старая геометрия восстанавливается.
Похоже, что это не так в Firefox для прокрутки элементов textarea.
Если этот фрагмент запускается в Chrome (Brave) результаты — 50,0,50,0,50, а в Firefox — 50,0,0,0,0. Похоже, что после удаления текстовой области из DOM ее значение ScrollTop устанавливается на ноль.
Я хотел бы, чтобы текстовая область оставалась в той же позиции прокрутки после того, как она временно не отображается. Я могу получить (перед удалением) и установить (после восстановления) значение, но это приводит к небольшому скачку при прокрутке от 0 до восстановленного значения после отображения.
Есть ли способ изменить это поведение в фаерфоксе? Это не серьезная проблема, но я бы предпочел, чтобы все работало правильно.
Спасибо.

Код: Выделить всё

var
t = document.querySelector('textarea');
d = t.parentNode,
delay = 1000;
t.value ='1\n2\n3\n4\n5\n6\n7\n8\n9\n10';
t.scrollTop = 50;
function tran(t) {
return new Promise( (resolve,reject) => {
setTimeout( () => {resolve(0);}, t );
});
}
console.log(t.scrollTop);
tran(delay)
.then( (r) => {
d.classList.toggle('sel');
console.log(t.scrollTop);
return tran(delay);
})
.then( (r) => {
d.classList.toggle('sel');
console.log(t.scrollTop);
return tran(delay);
})
.then( (r) => {
d.classList.toggle('sel');
console.log(t.scrollTop);
return tran(delay);
})
.then( (r) => {
d.classList.toggle('sel');
console.log(t.scrollTop);
return tran(delay);
})
;

Код: Выделить всё

div {
display: none;
}
div.sel {
display:block;
}
textarea {
height: 100px;
}



Подробнее здесь: https://stackoverflow.com/questions/792 ... isplayed-a
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»