Scrolling

by PoniLoW

HTML

<div id="scrollbar-border-top"></div><div id="scrollbar-border-inside"></div><div id="scrollbar"></div><div id="scrollbar-border-bottom"></div>
<div id="container">
  <div class="content first">
    <a href="#second"><button type="button" class="btn btn-outline-success" id="gomb_kovetkezo"> &#11167; </button></a>
  </div>
  <div class="content second" id="second">
  
  </div>
</div>

CSS

#container {
	width: 100%;
	height: 100vh;
	scroll-behavior: smooth;
  overflow-y: scroll;
}

.content {
  display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: 100vh;
	justify-content: space-between;
	margin: 0;
	z-index: 1;
	
	background-image: url("../img/bg2.jpg");
	background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.first {
  background-color: lightblue;
}

.second {
  background-color: red;
}

#scrollbar {
  width: 0%;
  height: 5px;
  background-color: red;
  position: fixed;
  top: 5px;
  z-index: 3;
}

#scrollbar-border-top {
	width: 100%;
	height: 5px;
	background-color: black;
	position: fixed;
	top: 0px;
	z-index: 2;
}

#scrollbar-border-bottom {
	width: 100%;
	height: 5px;
	background-color: black;
	position: fixed;
	top: 10px;
	z-index: 2;
}

#scrollbar-border-inside {
  width: 100%;
  height: 5px;
  background-color: black;
  position: fixed;
  top: 5px;
  z-index: 2;
}

JavaScript

document.addEventListener("scroll", scrollHappened);
function scrollHappened(event) {
  var scrollableHeight = document.body.scrollHeight-window.innerHeight;
  var scrollPosition = window.scrollY;
  var percentage = scrollPosition / scrollableHeight *100;
  var scrollbar = document.getElementById("scrollbar");
  scrollbar.style.width = percentage + "%";
}