Eventos de scroll

by Antério Vieira

HTML

<span id="contador">
  0
</span>

<div>
  Número de eventos na rolagem
  
  <button type="button" id="resetar" class="resetar">
    Resetar
  </button>
</div>

CSS

#contador {
  position: fixed;
  top: 50%;
  left: 50%;
  background-color: #222222;
  opacity: 0.5;
  color: #fff;
  font-size: 2em;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.resetar {
  border: 1px solid #ececec;
  padding: 10px;
  margin-top: 20px;
  display: block;
}

body {
   background: #444444;
   color: white;
    font: 15px/1.51 system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
   margin:0 auto;
   max-width:600px;
   padding:20px;
   min-height:2000vh;
}

Babel + JSX

var i = 0, contador = $('#contador')

$(document).ready(() => {
	
  $(document).on('scroll', () => {
    contador.text(++i)
  })
  
});

$('#resetar').click(() => {
	contador.text(0);
})