Skip to content

Instantly share code, notes, and snippets.

@leye0
Created September 19, 2018 17:17
Show Gist options
  • Save leye0/72a63745503a66b4fa3b4e038e541929 to your computer and use it in GitHub Desktop.
Save leye0/72a63745503a66b4fa3b4e038e541929 to your computer and use it in GitHub Desktop.
Here’s a simple example of what I’m saying:
```
<style>
.div1 {
overflow-x: hidden;
overflow-y: scroll;
height: 100px;
width: 20px;
}
.div2 {
height: 500%;
}
::-webkit-scrollbar{
width: 20px;
}
::-webkit-scrollbar-track{
background: rgb(41,41,41);
border-radius: 100px;
}
::-webkit-scrollbar-thumb{
background: rgb(111,111,111);
border-radius: 100px;
}
</style>
<div class="div1">
<div class="div2"</div>
</div>
<script>
var sliderHeight = 500;
document.querySelector('.div1')
.addEventListener("scroll", (event) => {
var sliderMaxScroll = sliderHeight - event.target.offsetHeight;
var position = event.target.scrollTop / sliderMaxScroll;
console.log(position);
});
</script>
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment