Как при фокусе на инпут на мобильной версии сделать так чтобы уровень скролла в чате сохранялся?

Question

Пример страницы: https://codesandbox.io/s/summer-flower-uxw47?file=/index.html:4175-4223

В чем проблема? Проблема в том что когда с телефона заходишь и нажимаешь на инпут то появляется клавиатура. И если текст в основной части чата был на одном уровне, то при раскрытии клавиатуры уже на другой.

Answer 1

// В этой переменной будем хранить счетчик для генератора
let counter = 0;

// Здесь просто наполним параграф текстом с градиентом на фоне
p.innerHTML = new Array(255).fill().map((s,i)=>{
  let ch = i.toString(16).padStart(2,0);
  return [
    ch.repeat(3),
    ch.repeat(2)+'00',
    ch+'00'+ch,
    ch+'0000',
    '00'+ch.repeat(2),
    '00'+ch+'00',
    '0000'+ch 
   ].map(color =>
      "<span style='background: #"+color+
       ";'> ... "+(''+(counter++)).padStart(4,0)+
       " ... </span>").join``;
 }).join``;

// в переменной будем хранить расстояние скролла от нижней границы div
let lastSB;

// Вешаем слушателя на событие resize окна
window.onresize = () => { 
  // Текущее расстояние
  const curSB = div.scrollHeight - div.clientHeight - div.scrollTop;
  // Смещение
  div.scrollTop = lastSB ? div.scrollHeight - div.clientHeight - lastSB : 
                           div.scrollHeight - div.clientHeight;
  lastSB = curSB;
};

// Вешаем событие на скролл div
div.onscroll = () => {
  // Пересчитаем расстояние от скролла до нижней границы div
  lastSB = div.scrollHeight - div.clientHeight - div.scrollTop;
};

* { box-sizing: border-box; }
body { padding: 0; margin: 0; width: 100vw; height: 100vh;}
#div{
  height: calc(100vh - 30px);
  overflow: scroll;
}
#input {
  height: 30px;
  width: 100vw;
}
span {
  color:#fff;
}

<div id="div">
  <!-- div у нас будет сроллиться, а p будет контентом -->
  <p id="p"></p>
</div>
<input id="input">

БЛОГ НА HUSL

Как при фокусе на инпут на мобильной версии сделать так чтобы уровень скролла в чате сохранялся?

Ответы (1 шт):