Как спрятать блок при скроле?

Question

Помогите пожалуйста реализовать такую штуку. Есть блок, и я хочу чтобы при скроле вверх/низ он уходил в display:none а если перестал скролить то он появился в display:block. Т.е. чтобы была

#block{
background:red;
width:200px;
height:200px;
}

 <div id="block"></div>

, если скролишь то он исчезает(скролишь вверх или же вниз), а если скрола нету то он появляется. Надо с учетом на то что на телефоне так же будет работать. Спасибо огромное)

Answer 1

Вы можете попробовать через функцию setTimeout и clearTimeout.
Минус данного метода в том что при каждом скрулле вы обновляете переменную showBlock.

let block = document.querySelector('#block');
let showBlock;

window.addEventListener('scroll', () => {
  clearTimeout(showBlock);
  block.style.display = 'none';

  showBlock = setTimeout(() => {
    block.style.display = 'block';
  }, 20);
})

body {
  height: 1600px;
}

#block {
  position: fixed;
  margin: 24px;
  background: red;
  width: 200px;
  height: 200px;
}

<div id="block"></div>

БЛОГ НА HUSL

Как спрятать блок при скроле?

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