scroll event example

by Sebastian Kay

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<div class="example">
  <h1 class="title">Scroll Down <span class="arrow">👇</span></h1>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS

.example {
  padding-top: 800px;
  padding-bottom: 300px;
  width: 100%;
  background: #eee;
  position: relative;
}

.title {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.arrow {
  display: inline-block;
  animation: bounce 1s infinite ease;
}

.box {
  margin: 0 auto 200px auto;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background: #7de2fc linear-gradient(-225deg, #7de2fc 0%, #b9b6e5 100%);
}

.box.tada {
  animation: tada 1s ease;
}

#scroller {
  width: 300px;
  height: 300px;
  overflow-y: scroll;
  background: #eee;
}

#scroller::-webkit-scrollbar {
  width: 10px !important;
}


/* Track */
#scroller::-webkit-scrollbar-track {
  background: #eee !important;
}


/* Handle */
#scroller::-webkit-scrollbar-thumb {
  background: #555 !important;
}


/* Handle on hover */
#scroller::-webkit-scrollbar-thumb:hover {
  background: #777 !important;
}

#scroller p {
  height: 800px;
  width: 100%;
  background: #ccc;
}

JavaScript

var test1 = window.getComputedStyle(document.querySelector('#scroller'), '::-webkit-scrollbar');
	
$(window).on("scroll", function() {
		alert("test");
});