Как сделать такой же Swipe эффект только на чистом js?

Как сделать такой же Swipe эффект только на чистом js?

Пытался сделать через событие scroll но не получается, потому что я дал родителю свойство overflow: hidden;, а если убрать это свойство то появляется scrollBar


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

Автор решения: qwabra

Пытался сделать через событие scroll но не получается, потому что я дал родителю свойство overflow: hidden;, а если убрать это свойство то появляется scrollBar

просто оставлю это тут

const div = document.querySelector('.q')

div.addEventListener('scroll', e => console.log('scroll'))
.q {
  display: inline-block;
  width: 101px;
  height: 36px;
  background-color: #defffa;
}

.noscroll {
  overflow: hidden;
}

.scroll {
  overflow-x: hidden;
  overflow-y: scroll;
}

.scroll::-webkit-scrollbar {
  display: none;
}

.scroll {
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}

/*stackoverflow console height*/ 
.as-console-wrapper {
  height: 100px!important;
}
<div class="noscroll">
  <input type="checkbox" checked onchange="toggleScroll()">
  <br>
  <script>
    function toggleScroll() {
      document.querySelector('.q').classList.toggle('scroll')
    }
  </script>
  <div class="q scroll">
    q<br> q
    <br> q
    <br> q
    <br>
  </div>
</div>

→ Ссылка