Как пропорционально менять позицию элементов при увеличении соседнего блока (textarea)?

Question

[monochromer]

Всем здоровья!

Есть простейший UI для чата - скроллируемый список сообщений и поле ввода текста (textarea). Поле ввода при наборе текста увеличивается в определенных границах, а список сообщений уменьшается на соответствующую величину. При изменении textarea хочется пропорционально менять позицию элементов (как, скажем, в Telegram или Skype). Для этого я прибавляю разницу изменения высоты textarea к скроллу:
appMain.scrollTop += diff;

Но эта техника не работает, если скролл находится в самом конце, к тому же наблюдаются кроссбраузерные различия (разное поведение, например, в Chrome, Firefox, Safari ).
Есть ли какие-то способы для решения задачи?

demo примера: jsfiddle.net/onsbx687/6
Видео пример как должно быть: https://cloud.mail.ru/public/8hDU/4SQfEs7VD

Comments

[Никита]

На scoll нужно повесить event, и запомнить текущее значение, только значение нужно хранить не в пикселях, а в процентом соотношении(т.е. на сколько процентов от самого верха Вы проскролили).

И после каждого добавлении сообщения брать высоту блока с сообщениями и ваш процент, и ставить textarea нужный scroll. Даже если вы просто вводите текст и у Вас меняется размер поля, Вы тоже выставляете scroll полю списка сообщений.

Answer 1

[Евгений]

текстарее снизу выставить display: fixed; left: 0; right: 0; bottom: 0;
при желании списку сверху добавить паддинг снизу

Comments

[monochromer]

нет, этот способ не дает желаемый результат.

[Евгений]

monochromer, тогда при каждом набранном символе запоминать высоту текстареи и при изменении высоты (какую-то подписку оформить на это событие) на разницу в высоте сдвигать скролл в верхнем блоке через element.scrollTo

[monochromer]

Евгений, это все описано в вопросе

[Евгений]

monochromer, положениескролла требуется сохранять по верхнему или по нижнему краю?

[monochromer]

Евгений, возможно, слова "как сохранить позицию скролла" немного путают, поэтому переписал вопрос и добавил видео на примере нативного приложения Telegram как это должно работать.

[Евгений]

monochromer, рассматривая проблемное место - нахождение в самом низу скролла, то можно по условию скролл топ выставлять как значение высоты враппера со скроллом. в остальном ваш пример, по крайней мере, в хроме работает аналогично.

[monochromer]

Евгений, это не рабоатет в Firefox и Safari

[RAX7]

monochromer, у меня получилось только увеличивать высоту textarea и одновременно увеличивать количество rows на textarea, при уменьшении Firefox и Safari начинают брыкаться https://jsfiddle.net/asrg7cyk/
Возможно вместо textarea стоит попробовать обычный div с contenteditable="true"