Как сделать расширяющийся блок на css и наверное js?

Всем привет! У меня необычная задача. На странице внизу есть блок (на картинке он зеленый).
62697046dc5c5090592951.jpeg
Мне нужно, чтобы можно было его сворачивать и разворачивать потянув его вниз и вверх.

К примеру он расположен внизу и его высота 50px. Потянув его вверх он разворачивается на всю ширину экрана. Затем потянув вниз он возвращается на высоту 50px как было изначально. Это должно работать и от мышки и от пальца не телефоне

Простите, что по тупому написал. Заранее благодарю за ответы.
  • Вопрос задан
  • 281 просмотр
Пригласить эксперта
Ответы на вопрос 1
@hulq
HTML:
<body>
  <div id="k"></div>
</body>


CSS:
#k {
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 0;
  background: green;
}


JS:
const object = document.querySelector('#k');

object.onmousedown = function(event) {

  let shiftY = event.clientY - object.getBoundingClientRect().height;

  object.style.zIndex = 1000;
  document.body.append(object);

  moveAt(event.pageY);

  function moveAt(pageY) {
    object.style.height = shiftY - pageY + 'px';
  }

  function onMouseMove(event) {
    moveAt(event.pageY);
  }

  document.addEventListener('mousemove', onMouseMove);

  object.onmouseup = function() {
    document.removeEventListener('mousemove', onMouseMove);
    object.onmouseup = null;
  };

};

object.ondragstart = function() {
  return false;
};


Как-то так
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы