Develop Reference

Fix javascript sticky header jump when using css transition

I have the following sticky header that appears when you scroll down the page past 100px.
var scrollpos = window.scrollY;
var header = document.getElementById("masthead");
function add_class_on_scroll() {
header.classList.add("slide-in");
}
function remove_class_on_scroll() {
header.classList.remove("slide-in");
}
window.addEventListener('scroll', function(){
scrollpos = window.scrollY;
if(scrollpos > 188) {
add_class_on_scroll();
}
else {
remove_class_on_scroll();
}
});
html {
box-sizing: border-box;
}
body {
margin: 0;
}
.site {
position: relative;
}
.site-header {
position: relative;
top: -100px;
height: 100px;
background-color: #f5f5f5;
transition: top ease-in-out 1s;
display: flex;
justify-content: center;
align-items: center;
}
.slide-in {
position: sticky;
top: 0;
}
<div class="site">
<header id="masthead" class="site-header">
<p>I'm the site header</p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur diam dui. Curabitur egestas augue non arcu tincidunt, ut fermentum mi lacinia. Sed vehicula non lectus at efficitur. Sed bibendum ipsum sed cursus condimentum. Maecenas non leo semper nisl consequat vestibulum. Maecenas vestibulum sodales metus, in varius ante efficitur a. Integer ipsum orci, ultrices facilisis mi sed, bibendum egestas ipsum. Maecenas nec elit non libero bibendum condimentum.</p>
<p>Suspendisse potenti. Vestibulum vestibulum, diam eleifend mattis dictum, ante nulla semper est, at fermentum leo ligula sit amet nunc. Nullam gravida sem et urna maximus, eu efficitur eros hendrerit. Aliquam convallis facilisis mi sed congue. Praesent pulvinar vehicula urna, quis iaculis nisi vestibulum non. Aliquam pulvinar risus id blandit malesuada. Proin pharetra, nibh nec consequat fringilla, erat quam sollicitudin orci, id tincidunt ex justo in diam. Vestibulum eleifend metus urna, at interdum arcu venenatis ac. Nam euismod, lorem ac fringilla bibendum, dui massa volutpat nulla, non aliquam nisi ligula id ligula. Sed iaculis viverra nisi eget mattis.</p>
<p>Phasellus ac lacus tincidunt, vestibulum dolor eget, dictum massa. Fusce fringilla lorem sed ex placerat ornare. Aenean in consequat mauris, in dapibus enim. Sed commodo posuere est ut lobortis. Nulla elementum pretium ante eu elementum. Nulla facilisi. Curabitur quam velit, varius nec leo vitae, scelerisque dignissim justo.</p>
<p>Donec nec rutrum tortor, ac semper dolor. Maecenas id laoreet orci. Vivamus tincidunt commodo nisi sit amet posuere. Vestibulum pretium risus ante, non mattis ex eleifend quis. Ut id scelerisque tortor, quis ullamcorper orci. Sed vestibulum pharetra nibh. Donec ultricies nibh neque, vitae ullamcorper elit rhoncus a. Nunc odio turpis, euismod at tempus vitae, aliquet in lectus. Praesent vehicula lectus et enim fringilla feugiat.</p>
<p>Quisque eleifend libero a mi sodales vehicula. Aliquam erat volutpat. Maecenas dignissim rutrum auctor. Vestibulum pretium lacus quis vehicula placerat. Cras placerat leo non libero imperdiet, ac tristique ligula feugiat. Aliquam semper aliquam ligula, sed fermentum erat sagittis eget. Donec lorem urna, tristique at suscipit sed, euismod nec odio.</p>
<p>Aliquam lobortis lorem non libero varius, in ultricies ipsum ornare. Sed imperdiet elementum ligula, non blandit nunc imperdiet quis. Vivamus ut dictum est, quis euismod orci. Sed eget magna ac massa gravida porta. Donec nibh massa, scelerisque ac tempus a, fringilla vel nunc. Aenean malesuada pulvinar quam sed pretium. Aenean id dui a neque lobortis dictum vitae ac ipsum. Donec interdum ligula mattis enim facilisis vehicula facilisis id eros. Donec eu dolor sit amet neque ultricies faucibus nec et arcu. Proin vulputate elementum dui nec gravida. Nunc odio justo, consequat non tortor ut, rutrum mollis magna. Donec ac leo elit. Fusce hendrerit maximus est mattis porta. Praesent malesuada interdum orci nec viverra. Mauris porta ligula in auctor tincidunt. Suspendisse potenti.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet purus quis enim egestas tincidunt. Maecenas mattis ut metus eget viverra. Praesent hendrerit odio tincidunt, feugiat metus quis, gravida turpis. Aenean sed mauris commodo libero placerat malesuada eu accumsan lacus. Mauris mi tortor, fringilla nec velit tristique, eleifend pulvinar nunc. Integer nec accumsan mauris. Maecenas mattis, est sit amet congue consectetur, mi massa dignissim urna, ut efficitur orci est et ex. In ac lorem viverra, dictum libero at, pellentesque neque. Cras congue volutpat diam ac luctus. Etiam iaculis augue enim, eget pharetra ligula posuere ac.</p>
<p>Curabitur elementum malesuada nulla, nec semper lectus pretium eget. Proin tempor tortor sed lectus sollicitudin bibendum. Donec non sodales nibh. Suspendisse gravida, purus eget fringilla sagittis, quam ex tempus nisl, quis consectetur orci elit in nisi. Nam tincidunt finibus leo sed consectetur. Etiam sit amet ex aliquet, varius augue ac, consequat nisl. Integer ac dignissim lacus. Ut at facilisis ligula, vel viverra mauris. Phasellus ut egestas turpis. Phasellus sit amet quam ut dui hendrerit tincidunt eget et nisi. Donec tempor dapibus enim. Etiam eget nunc eleifend, hendrerit diam vitae, fringilla mi. Nunc a condimentum felis.</p>
<p>Vestibulum pharetra ultricies ultrices. Vestibulum cursus ante felis. Sed aliquet, elit eget posuere consequat, mauris arcu tincidunt dolor, at porta erat orci a felis. In quis viverra diam. Vestibulum porta nisi purus, lacinia placerat ligula posuere et. Ut aliquet commodo sem non luctus. Mauris suscipit justo eget turpis interdum blandit eu eu purus. Integer condimentum blandit sapien id pellentesque. In convallis odio in neque accumsan, vitae volutpat mi ornare. Vivamus a augue quis tellus facilisis luctus. Integer laoreet, tortor vel interdum blandit, arcu arcu ornare nunc, in cursus mi tellus vitae mauris. Etiam molestie nibh sapien, id auctor nulla ullamcorper in. Maecenas vel justo est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque porttitor lacinia ipsum ultricies rutrum.</p>
<p>Quisque varius tempor tellus. Morbi eleifend venenatis nunc, sed sodales tortor vulputate a. Quisque non risus ut nunc viverra suscipit non rhoncus neque. Aliquam at efficitur ligula. Ut diam tortor, feugiat ut rutrum ac, imperdiet in nibh. Proin at odio nec mi aliquet efficitur lobortis vitae turpis. Curabitur molestie odio nec laoreet luctus. Praesent vel ligula at felis convallis accumsan. Fusce cursus nisi orci, in placerat lorem congue convallis. Praesent pellentesque consequat elit, nec interdum velit tincidunt a.</p>
<p>Nullam efficitur est ligula, non fringilla massa pulvinar at. Aliquam non porta tortor. Aenean sit amet mollis turpis. Curabitur convallis sollicitudin leo a aliquam. Praesent vitae semper odio. Curabitur condimentum lorem eget dapibus volutpat. Vivamus id tortor erat. Cras mollis varius dolor. Donec laoreet, ipsum sed sollicitudin placerat, nulla diam consequat nibh, sit amet lobortis diam turpis vitae dui. Aliquam dapibus diam nec porttitor egestas. Nam eu tristique orci, in tristique tortor. Sed est ex, scelerisque sed ligula a, condimentum maximus augue. Phasellus malesuada augue libero, eu consectetur magna rhoncus a. Sed ipsum tellus, viverra ut suscipit id, efficitur eu est.</p>
<p>Proin sagittis magna ac enim varius maximus. Quisque vel neque tincidunt, malesuada diam ut, bibendum tortor. Praesent feugiat ante egestas, convallis nisi at, ornare lacus. Nunc non sem vel orci posuere efficitur. Morbi accumsan ipsum ut turpis rhoncus, id ultricies nulla mollis. Sed purus diam, pellentesque vitae quam ac, hendrerit suscipit eros. Quisque euismod, nunc sit amet varius fermentum, sapien purus condimentum nunc, sit amet ultricies lacus turpis eu ante. Donec pulvinar iaculis blandit. Morbi quis ligula lorem. In in bibendum libero. Integer convallis elit eu ex lobortis, nec luctus libero ultrices. Nam ullamcorper posuere cursus. Ut feugiat, mauris scelerisque facilisis eleifend, magna massa maximus mi, at porttitor ex leo sit amet nisl. Praesent ligula purus, aliquet in commodo sit amet, porttitor ac velit. Nunc sodales elementum arcu, et fringilla libero ultricies ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</p>
<p>Ut nec interdum magna. Aenean sit amet vehicula neque. Nunc tincidunt ultrices tellus vitae pretium. Pellentesque posuere ultricies diam, ullamcorper hendrerit nibh ullamcorper in. Maecenas ut est et elit venenatis vestibulum. Vestibulum id hendrerit eros. Aliquam efficitur est elit, nec malesuada purus posuere ac. Morbi eu est porttitor, condimentum arcu eget, pretium nisi. Aliquam viverra enim vitae vulputate viverra. Nullam vitae metus sodales, finibus justo vel, efficitur neque. Morbi euismod rutrum tempus. Donec cursus lectus sed commodo vestibulum. Vivamus eu ligula consequat, cursus neque ac, tempus sapien.</p>
<p>Donec vel urna ac lacus consectetur cursus. Donec tempor justo ornare libero eleifend, id ultrices nisi tincidunt. Donec ac orci eget ligula auctor pretium sit amet eu purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc ac luctus elit. Sed consectetur, elit at consequat mollis, justo lectus pellentesque lectus, malesuada congue erat velit eu tortor. Donec ullamcorper nibh a dui convallis venenatis. In a ullamcorper nulla, id porttitor nunc. Praesent elit orci, aliquam vel nunc sed, scelerisque tincidunt ex. Duis consequat dignissim lacus, id porttitor libero fringilla quis. Fusce libero dolor, consectetur id pharetra at, tristique eget sem. Donec et mollis nunc, in aliquet ligula.</p>
<p>Cras pellentesque imperdiet laoreet. Aliquam erat volutpat. Pellentesque ultrices aliquet pretium. Integer auctor sem magna, eget condimentum sapien elementum ac. Nunc finibus feugiat aliquet. Quisque libero ligula, congue sit amet vestibulum at, euismod a elit. Vivamus eget augue et nunc lobortis hendrerit sed ut turpis. Donec et ante commodo, faucibus felis in, viverra libero. Aliquam erat volutpat. Duis euismod magna eget metus tincidunt dapibus. Curabitur malesuada efficitur venenatis. Fusce eu nisi sed purus hendrerit consectetur et ac tellus. Cras placerat dignissim mauris, egestas bibendum eros pulvinar non. Quisque finibus eget elit eu placerat. Mauris diam metus, imperdiet et libero sit amet, venenatis finibus libero. Cras eget laoreet justo.</p>
<p>Proin sit amet orci nec magna tincidunt vehicula. Praesent mauris elit, ullamcorper eget odio sed, pulvinar luctus tellus. Mauris tempus, magna tempus vulputate efficitur, elit lectus accumsan est, ultricies volutpat nulla ante in sapien. Morbi condimentum erat sit amet mattis ullamcorper. Nullam tincidunt nunc vel leo vulputate porttitor. Donec efficitur hendrerit nunc, non viverra libero scelerisque ac. Ut gravida nec ante vitae facilisis. Pellentesque sagittis urna sit amet egestas vestibulum.</p>
<p>Duis tempus dui in interdum ullamcorper. Curabitur vulputate laoreet est, dictum condimentum sapien vehicula eget. Pellentesque ac dictum mi. Sed metus arcu, sodales lobortis urna vel, feugiat ullamcorper est. Integer lacinia, lacus ac tristique convallis, nunc purus bibendum arcu, at eleifend enim est non ipsum. Nam iaculis elementum convallis. Nulla tempus odio vel porta ullamcorper. Donec dignissim ut elit vestibulum faucibus.</p>
<p>Aenean a pulvinar ante. Nunc rutrum volutpat tincidunt. Aenean ultricies sodales mauris eget suscipit. Proin rhoncus ornare lacus in auctor. Duis nec urna sit amet tortor ullamcorper sagittis non nec massa. Nullam dolor sem, laoreet sit amet elit in, iaculis consequat turpis. Morbi semper nulla vel egestas ultrices. Suspendisse id est iaculis, facilisis metus non, accumsan augue. Vestibulum arcu nulla, porta euismod felis et, sollicitudin vehicula ligula. Pellentesque ac dolor ac eros gravida tempus. Etiam sed sem ultrices, tincidunt purus eget, porttitor eros. Vivamus ut tempor sem. Donec interdum efficitur mollis.</p>
<p>In a laoreet ante. Suspendisse potenti. In sit amet enim elit. In arcu mauris, luctus a urna eget, aliquet accumsan tellus. Maecenas egestas, sem nec commodo tincidunt, metus tortor volutpat libero, eget tristique metus velit sed eros. Fusce bibendum lacus id lectus semper, id volutpat turpis dictum. Vestibulum eu elit eget eros dictum cursus. Mauris consectetur dolor eu ligula condimentum aliquam at id dui. Vestibulum non dolor ante. Morbi a dapibus erat. Nulla placerat mi id neque rhoncus, et semper dolor hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quam sem, dapibus non aliquet iaculis, mollis id urna.</p>
<p>Integer pellentesque enim a justo venenatis sodales. Etiam in nisl ipsum. Vestibulum fringilla dignissim faucibus. Nam pellentesque, mi ac accumsan mattis, elit velit bibendum lacus, id scelerisque ligula sapien id diam. Sed condimentum rutrum metus, in sollicitudin quam ultricies ut. Phasellus at lobortis arcu. Duis auctor, arcu id hendrerit faucibus, odio turpis finibus mi, molestie tempus ex lorem suscipit enim. Nam pretium laoreet ipsum. Donec eu mauris euismod, varius mi id, elementum leo. Integer ultricies nulla massa, in consequat lectus pellentesque ut. Ut eu risus mi. Pellentesque id ligula sodales, maximus lorem at, bibendum velit. Etiam vitae eros vitae quam lacinia egestas. Sed ullamcorper egestas magna, eget suscipit nulla euismod a. Morbi accumsan arcu a vulputate iaculis.</p>
</div>
The problem I'm having is when I scroll back up and the .slide-in class is removed, the header snaps back into position without a transition. This looks a little buggy.
I've used transition: top ease-in-out 1s; on .site-header but this doesn't have an effect when the class is removed. Is there a way to apply a transition in reverse for when the class is removed?
I'm using position: relative; instead of fixed position: fixed; because I want the header to be hidden when you're at the top.

This is because you used position relative & sticky in two different situation.
relative is related to it's parent div
static is related to it's screen
var scrollpos = window.scrollY;
var header = document.getElementById("masthead");
function add_class_on_scroll() {
header.classList.add("slide-in");
}
function remove_class_on_scroll() {
header.classList.remove("slide-in");
}
window.addEventListener('scroll', function(){
scrollpos = window.scrollY;
if(scrollpos > 188) {
add_class_on_scroll();
}
else {
remove_class_on_scroll();
}
});
html {
box-sizing: border-box;
}
body {
margin: 0;
}
.site {
position: relative;
overflow:hidden;
}
.site-header {
position: fixed;
height: 100px;
top: -100px;
background-color: #f5f5f5;
transition: top ease-in-out 1s;
display: flex;
justify-content: center;
align-items: center;
Width:100%;
overflow: hidden;
}
.slide-in {
position: fixed;
top: 0px;
}
<div class="site">
<header id="masthead" class="site-header">
<p>I'm the site header</p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur diam dui. Curabitur egestas augue non arcu tincidunt, ut fermentum mi lacinia. Sed vehicula non lectus at efficitur. Sed bibendum ipsum sed cursus condimentum. Maecenas non leo semper nisl consequat vestibulum. Maecenas vestibulum sodales metus, in varius ante efficitur a. Integer ipsum orci, ultrices facilisis mi sed, bibendum egestas ipsum. Maecenas nec elit non libero bibendum condimentum.</p>
<p>Suspendisse potenti. Vestibulum vestibulum, diam eleifend mattis dictum, ante nulla semper est, at fermentum leo ligula sit amet nunc. Nullam gravida sem et urna maximus, eu efficitur eros hendrerit. Aliquam convallis facilisis mi sed congue. Praesent pulvinar vehicula urna, quis iaculis nisi vestibulum non. Aliquam pulvinar risus id blandit malesuada. Proin pharetra, nibh nec consequat fringilla, erat quam sollicitudin orci, id tincidunt ex justo in diam. Vestibulum eleifend metus urna, at interdum arcu venenatis ac. Nam euismod, lorem ac fringilla bibendum, dui massa volutpat nulla, non aliquam nisi ligula id ligula. Sed iaculis viverra nisi eget mattis.</p>
<p>Phasellus ac lacus tincidunt, vestibulum dolor eget, dictum massa. Fusce fringilla lorem sed ex placerat ornare. Aenean in consequat mauris, in dapibus enim. Sed commodo posuere est ut lobortis. Nulla elementum pretium ante eu elementum. Nulla facilisi. Curabitur quam velit, varius nec leo vitae, scelerisque dignissim justo.</p>
<p>Donec nec rutrum tortor, ac semper dolor. Maecenas id laoreet orci. Vivamus tincidunt commodo nisi sit amet posuere. Vestibulum pretium risus ante, non mattis ex eleifend quis. Ut id scelerisque tortor, quis ullamcorper orci. Sed vestibulum pharetra nibh. Donec ultricies nibh neque, vitae ullamcorper elit rhoncus a. Nunc odio turpis, euismod at tempus vitae, aliquet in lectus. Praesent vehicula lectus et enim fringilla feugiat.</p>
<p>Quisque eleifend libero a mi sodales vehicula. Aliquam erat volutpat. Maecenas dignissim rutrum auctor. Vestibulum pretium lacus quis vehicula placerat. Cras placerat leo non libero imperdiet, ac tristique ligula feugiat. Aliquam semper aliquam ligula, sed fermentum erat sagittis eget. Donec lorem urna, tristique at suscipit sed, euismod nec odio.</p>
<p>Aliquam lobortis lorem non libero varius, in ultricies ipsum ornare. Sed imperdiet elementum ligula, non blandit nunc imperdiet quis. Vivamus ut dictum est, quis euismod orci. Sed eget magna ac massa gravida porta. Donec nibh massa, scelerisque ac tempus a, fringilla vel nunc. Aenean malesuada pulvinar quam sed pretium. Aenean id dui a neque lobortis dictum vitae ac ipsum. Donec interdum ligula mattis enim facilisis vehicula facilisis id eros. Donec eu dolor sit amet neque ultricies faucibus nec et arcu. Proin vulputate elementum dui nec gravida. Nunc odio justo, consequat non tortor ut, rutrum mollis magna. Donec ac leo elit. Fusce hendrerit maximus est mattis porta. Praesent malesuada interdum orci nec viverra. Mauris porta ligula in auctor tincidunt. Suspendisse potenti.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet purus quis enim egestas tincidunt. Maecenas mattis ut metus eget viverra. Praesent hendrerit odio tincidunt, feugiat metus quis, gravida turpis. Aenean sed mauris commodo libero placerat malesuada eu accumsan lacus. Mauris mi tortor, fringilla nec velit tristique, eleifend pulvinar nunc. Integer nec accumsan mauris. Maecenas mattis, est sit amet congue consectetur, mi massa dignissim urna, ut efficitur orci est et ex. In ac lorem viverra, dictum libero at, pellentesque neque. Cras congue volutpat diam ac luctus. Etiam iaculis augue enim, eget pharetra ligula posuere ac.</p>
<p>Curabitur elementum malesuada nulla, nec semper lectus pretium eget. Proin tempor tortor sed lectus sollicitudin bibendum. Donec non sodales nibh. Suspendisse gravida, purus eget fringilla sagittis, quam ex tempus nisl, quis consectetur orci elit in nisi. Nam tincidunt finibus leo sed consectetur. Etiam sit amet ex aliquet, varius augue ac, consequat nisl. Integer ac dignissim lacus. Ut at facilisis ligula, vel viverra mauris. Phasellus ut egestas turpis. Phasellus sit amet quam ut dui hendrerit tincidunt eget et nisi. Donec tempor dapibus enim. Etiam eget nunc eleifend, hendrerit diam vitae, fringilla mi. Nunc a condimentum felis.</p>
<p>Vestibulum pharetra ultricies ultrices. Vestibulum cursus ante felis. Sed aliquet, elit eget posuere consequat, mauris arcu tincidunt dolor, at porta erat orci a felis. In quis viverra diam. Vestibulum porta nisi purus, lacinia placerat ligula posuere et. Ut aliquet commodo sem non luctus. Mauris suscipit justo eget turpis interdum blandit eu eu purus. Integer condimentum blandit sapien id pellentesque. In convallis odio in neque accumsan, vitae volutpat mi ornare. Vivamus a augue quis tellus facilisis luctus. Integer laoreet, tortor vel interdum blandit, arcu arcu ornare nunc, in cursus mi tellus vitae mauris. Etiam molestie nibh sapien, id auctor nulla ullamcorper in. Maecenas vel justo est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque porttitor lacinia ipsum ultricies rutrum.</p>
<p>Quisque varius tempor tellus. Morbi eleifend venenatis nunc, sed sodales tortor vulputate a. Quisque non risus ut nunc viverra suscipit non rhoncus neque. Aliquam at efficitur ligula. Ut diam tortor, feugiat ut rutrum ac, imperdiet in nibh. Proin at odio nec mi aliquet efficitur lobortis vitae turpis. Curabitur molestie odio nec laoreet luctus. Praesent vel ligula at felis convallis accumsan. Fusce cursus nisi orci, in placerat lorem congue convallis. Praesent pellentesque consequat elit, nec interdum velit tincidunt a.</p>
<p>Nullam efficitur est ligula, non fringilla massa pulvinar at. Aliquam non porta tortor. Aenean sit amet mollis turpis. Curabitur convallis sollicitudin leo a aliquam. Praesent vitae semper odio. Curabitur condimentum lorem eget dapibus volutpat. Vivamus id tortor erat. Cras mollis varius dolor. Donec laoreet, ipsum sed sollicitudin placerat, nulla diam consequat nibh, sit amet lobortis diam turpis vitae dui. Aliquam dapibus diam nec porttitor egestas. Nam eu tristique orci, in tristique tortor. Sed est ex, scelerisque sed ligula a, condimentum maximus augue. Phasellus malesuada augue libero, eu consectetur magna rhoncus a. Sed ipsum tellus, viverra ut suscipit id, efficitur eu est.</p>
<p>Proin sagittis magna ac enim varius maximus. Quisque vel neque tincidunt, malesuada diam ut, bibendum tortor. Praesent feugiat ante egestas, convallis nisi at, ornare lacus. Nunc non sem vel orci posuere efficitur. Morbi accumsan ipsum ut turpis rhoncus, id ultricies nulla mollis. Sed purus diam, pellentesque vitae quam ac, hendrerit suscipit eros. Quisque euismod, nunc sit amet varius fermentum, sapien purus condimentum nunc, sit amet ultricies lacus turpis eu ante. Donec pulvinar iaculis blandit. Morbi quis ligula lorem. In in bibendum libero. Integer convallis elit eu ex lobortis, nec luctus libero ultrices. Nam ullamcorper posuere cursus. Ut feugiat, mauris scelerisque facilisis eleifend, magna massa maximus mi, at porttitor ex leo sit amet nisl. Praesent ligula purus, aliquet in commodo sit amet, porttitor ac velit. Nunc sodales elementum arcu, et fringilla libero ultricies ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</p>
<p>Ut nec interdum magna. Aenean sit amet vehicula neque. Nunc tincidunt ultrices tellus vitae pretium. Pellentesque posuere ultricies diam, ullamcorper hendrerit nibh ullamcorper in. Maecenas ut est et elit venenatis vestibulum. Vestibulum id hendrerit eros. Aliquam efficitur est elit, nec malesuada purus posuere ac. Morbi eu est porttitor, condimentum arcu eget, pretium nisi. Aliquam viverra enim vitae vulputate viverra. Nullam vitae metus sodales, finibus justo vel, efficitur neque. Morbi euismod rutrum tempus. Donec cursus lectus sed commodo vestibulum. Vivamus eu ligula consequat, cursus neque ac, tempus sapien.</p>
<p>Donec vel urna ac lacus consectetur cursus. Donec tempor justo ornare libero eleifend, id ultrices nisi tincidunt. Donec ac orci eget ligula auctor pretium sit amet eu purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc ac luctus elit. Sed consectetur, elit at consequat mollis, justo lectus pellentesque lectus, malesuada congue erat velit eu tortor. Donec ullamcorper nibh a dui convallis venenatis. In a ullamcorper nulla, id porttitor nunc. Praesent elit orci, aliquam vel nunc sed, scelerisque tincidunt ex. Duis consequat dignissim lacus, id porttitor libero fringilla quis. Fusce libero dolor, consectetur id pharetra at, tristique eget sem. Donec et mollis nunc, in aliquet ligula.</p>
<p>Cras pellentesque imperdiet laoreet. Aliquam erat volutpat. Pellentesque ultrices aliquet pretium. Integer auctor sem magna, eget condimentum sapien elementum ac. Nunc finibus feugiat aliquet. Quisque libero ligula, congue sit amet vestibulum at, euismod a elit. Vivamus eget augue et nunc lobortis hendrerit sed ut turpis. Donec et ante commodo, faucibus felis in, viverra libero. Aliquam erat volutpat. Duis euismod magna eget metus tincidunt dapibus. Curabitur malesuada efficitur venenatis. Fusce eu nisi sed purus hendrerit consectetur et ac tellus. Cras placerat dignissim mauris, egestas bibendum eros pulvinar non. Quisque finibus eget elit eu placerat. Mauris diam metus, imperdiet et libero sit amet, venenatis finibus libero. Cras eget laoreet justo.</p>
<p>Proin sit amet orci nec magna tincidunt vehicula. Praesent mauris elit, ullamcorper eget odio sed, pulvinar luctus tellus. Mauris tempus, magna tempus vulputate efficitur, elit lectus accumsan est, ultricies volutpat nulla ante in sapien. Morbi condimentum erat sit amet mattis ullamcorper. Nullam tincidunt nunc vel leo vulputate porttitor. Donec efficitur hendrerit nunc, non viverra libero scelerisque ac. Ut gravida nec ante vitae facilisis. Pellentesque sagittis urna sit amet egestas vestibulum.</p>
<p>Duis tempus dui in interdum ullamcorper. Curabitur vulputate laoreet est, dictum condimentum sapien vehicula eget. Pellentesque ac dictum mi. Sed metus arcu, sodales lobortis urna vel, feugiat ullamcorper est. Integer lacinia, lacus ac tristique convallis, nunc purus bibendum arcu, at eleifend enim est non ipsum. Nam iaculis elementum convallis. Nulla tempus odio vel porta ullamcorper. Donec dignissim ut elit vestibulum faucibus.</p>
<p>Aenean a pulvinar ante. Nunc rutrum volutpat tincidunt. Aenean ultricies sodales mauris eget suscipit. Proin rhoncus ornare lacus in auctor. Duis nec urna sit amet tortor ullamcorper sagittis non nec massa. Nullam dolor sem, laoreet sit amet elit in, iaculis consequat turpis. Morbi semper nulla vel egestas ultrices. Suspendisse id est iaculis, facilisis metus non, accumsan augue. Vestibulum arcu nulla, porta euismod felis et, sollicitudin vehicula ligula. Pellentesque ac dolor ac eros gravida tempus. Etiam sed sem ultrices, tincidunt purus eget, porttitor eros. Vivamus ut tempor sem. Donec interdum efficitur mollis.</p>
<p>In a laoreet ante. Suspendisse potenti. In sit amet enim elit. In arcu mauris, luctus a urna eget, aliquet accumsan tellus. Maecenas egestas, sem nec commodo tincidunt, metus tortor volutpat libero, eget tristique metus velit sed eros. Fusce bibendum lacus id lectus semper, id volutpat turpis dictum. Vestibulum eu elit eget eros dictum cursus. Mauris consectetur dolor eu ligula condimentum aliquam at id dui. Vestibulum non dolor ante. Morbi a dapibus erat. Nulla placerat mi id neque rhoncus, et semper dolor hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quam sem, dapibus non aliquet iaculis, mollis id urna.</p>
<p>Integer pellentesque enim a justo venenatis sodales. Etiam in nisl ipsum. Vestibulum fringilla dignissim faucibus. Nam pellentesque, mi ac accumsan mattis, elit velit bibendum lacus, id scelerisque ligula sapien id diam. Sed condimentum rutrum metus, in sollicitudin quam ultricies ut. Phasellus at lobortis arcu. Duis auctor, arcu id hendrerit faucibus, odio turpis finibus mi, molestie tempus ex lorem suscipit enim. Nam pretium laoreet ipsum. Donec eu mauris euismod, varius mi id, elementum leo. Integer ultricies nulla massa, in consequat lectus pellentesque ut. Ut eu risus mi. Pellentesque id ligula sodales, maximus lorem at, bibendum velit. Etiam vitae eros vitae quam lacinia egestas. Sed ullamcorper egestas magna, eget suscipit nulla euismod a. Morbi accumsan arcu a vulputate iaculis.</p>
</div>

The problem you are facing is due to a position change, you are having its one position to another and that is causing this issue. Try to have same position, either sticky or fixed.
var scrollpos = window.scrollY;
var header = document.getElementById("masthead");
function add_class_on_scroll() {
header.classList.add("slide-in");
}
function remove_class_on_scroll() {
header.classList.remove("slide-in");
}
window.addEventListener('scroll', function(){
scrollpos = window.scrollY;
if(scrollpos > 188) {
add_class_on_scroll();
}
else {
remove_class_on_scroll();
}
});
html {
box-sizing: border-box;
}
body {
margin: 0;
}
.site {
position: relative;
overflow:hidden;
}
.site-header {
position: fixed;
top: -100px;
height: 0;
background-color: #f5f5f5;
transition: all ease-in-out 1s;
display: flex;
justify-content: center;
align-items: center;
Width:100%;
left: 0;
}
.slide-in {
position: fixed;
height:100px;
top: 0;
}
<div class="site">
<header id="masthead" class="site-header">
<p>I'm the site header</p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur diam dui. Curabitur egestas augue non arcu tincidunt, ut fermentum mi lacinia. Sed vehicula non lectus at efficitur. Sed bibendum ipsum sed cursus condimentum. Maecenas non leo semper nisl consequat vestibulum. Maecenas vestibulum sodales metus, in varius ante efficitur a. Integer ipsum orci, ultrices facilisis mi sed, bibendum egestas ipsum. Maecenas nec elit non libero bibendum condimentum.</p>
<p>Suspendisse potenti. Vestibulum vestibulum, diam eleifend mattis dictum, ante nulla semper est, at fermentum leo ligula sit amet nunc. Nullam gravida sem et urna maximus, eu efficitur eros hendrerit. Aliquam convallis facilisis mi sed congue. Praesent pulvinar vehicula urna, quis iaculis nisi vestibulum non. Aliquam pulvinar risus id blandit malesuada. Proin pharetra, nibh nec consequat fringilla, erat quam sollicitudin orci, id tincidunt ex justo in diam. Vestibulum eleifend metus urna, at interdum arcu venenatis ac. Nam euismod, lorem ac fringilla bibendum, dui massa volutpat nulla, non aliquam nisi ligula id ligula. Sed iaculis viverra nisi eget mattis.</p>
<p>Phasellus ac lacus tincidunt, vestibulum dolor eget, dictum massa. Fusce fringilla lorem sed ex placerat ornare. Aenean in consequat mauris, in dapibus enim. Sed commodo posuere est ut lobortis. Nulla elementum pretium ante eu elementum. Nulla facilisi. Curabitur quam velit, varius nec leo vitae, scelerisque dignissim justo.</p>
<p>Donec nec rutrum tortor, ac semper dolor. Maecenas id laoreet orci. Vivamus tincidunt commodo nisi sit amet posuere. Vestibulum pretium risus ante, non mattis ex eleifend quis. Ut id scelerisque tortor, quis ullamcorper orci. Sed vestibulum pharetra nibh. Donec ultricies nibh neque, vitae ullamcorper elit rhoncus a. Nunc odio turpis, euismod at tempus vitae, aliquet in lectus. Praesent vehicula lectus et enim fringilla feugiat.</p>
<p>Quisque eleifend libero a mi sodales vehicula. Aliquam erat volutpat. Maecenas dignissim rutrum auctor. Vestibulum pretium lacus quis vehicula placerat. Cras placerat leo non libero imperdiet, ac tristique ligula feugiat. Aliquam semper aliquam ligula, sed fermentum erat sagittis eget. Donec lorem urna, tristique at suscipit sed, euismod nec odio.</p>
<p>Aliquam lobortis lorem non libero varius, in ultricies ipsum ornare. Sed imperdiet elementum ligula, non blandit nunc imperdiet quis. Vivamus ut dictum est, quis euismod orci. Sed eget magna ac massa gravida porta. Donec nibh massa, scelerisque ac tempus a, fringilla vel nunc. Aenean malesuada pulvinar quam sed pretium. Aenean id dui a neque lobortis dictum vitae ac ipsum. Donec interdum ligula mattis enim facilisis vehicula facilisis id eros. Donec eu dolor sit amet neque ultricies faucibus nec et arcu. Proin vulputate elementum dui nec gravida. Nunc odio justo, consequat non tortor ut, rutrum mollis magna. Donec ac leo elit. Fusce hendrerit maximus est mattis porta. Praesent malesuada interdum orci nec viverra. Mauris porta ligula in auctor tincidunt. Suspendisse potenti.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet purus quis enim egestas tincidunt. Maecenas mattis ut metus eget viverra. Praesent hendrerit odio tincidunt, feugiat metus quis, gravida turpis. Aenean sed mauris commodo libero placerat malesuada eu accumsan lacus. Mauris mi tortor, fringilla nec velit tristique, eleifend pulvinar nunc. Integer nec accumsan mauris. Maecenas mattis, est sit amet congue consectetur, mi massa dignissim urna, ut efficitur orci est et ex. In ac lorem viverra, dictum libero at, pellentesque neque. Cras congue volutpat diam ac luctus. Etiam iaculis augue enim, eget pharetra ligula posuere ac.</p>
<p>Curabitur elementum malesuada nulla, nec semper lectus pretium eget. Proin tempor tortor sed lectus sollicitudin bibendum. Donec non sodales nibh. Suspendisse gravida, purus eget fringilla sagittis, quam ex tempus nisl, quis consectetur orci elit in nisi. Nam tincidunt finibus leo sed consectetur. Etiam sit amet ex aliquet, varius augue ac, consequat nisl. Integer ac dignissim lacus. Ut at facilisis ligula, vel viverra mauris. Phasellus ut egestas turpis. Phasellus sit amet quam ut dui hendrerit tincidunt eget et nisi. Donec tempor dapibus enim. Etiam eget nunc eleifend, hendrerit diam vitae, fringilla mi. Nunc a condimentum felis.</p>
<p>Vestibulum pharetra ultricies ultrices. Vestibulum cursus ante felis. Sed aliquet, elit eget posuere consequat, mauris arcu tincidunt dolor, at porta erat orci a felis. In quis viverra diam. Vestibulum porta nisi purus, lacinia placerat ligula posuere et. Ut aliquet commodo sem non luctus. Mauris suscipit justo eget turpis interdum blandit eu eu purus. Integer condimentum blandit sapien id pellentesque. In convallis odio in neque accumsan, vitae volutpat mi ornare. Vivamus a augue quis tellus facilisis luctus. Integer laoreet, tortor vel interdum blandit, arcu arcu ornare nunc, in cursus mi tellus vitae mauris. Etiam molestie nibh sapien, id auctor nulla ullamcorper in. Maecenas vel justo est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque porttitor lacinia ipsum ultricies rutrum.</p>
<p>Quisque varius tempor tellus. Morbi eleifend venenatis nunc, sed sodales tortor vulputate a. Quisque non risus ut nunc viverra suscipit non rhoncus neque. Aliquam at efficitur ligula. Ut diam tortor, feugiat ut rutrum ac, imperdiet in nibh. Proin at odio nec mi aliquet efficitur lobortis vitae turpis. Curabitur molestie odio nec laoreet luctus. Praesent vel ligula at felis convallis accumsan. Fusce cursus nisi orci, in placerat lorem congue convallis. Praesent pellentesque consequat elit, nec interdum velit tincidunt a.</p>
<p>Nullam efficitur est ligula, non fringilla massa pulvinar at. Aliquam non porta tortor. Aenean sit amet mollis turpis. Curabitur convallis sollicitudin leo a aliquam. Praesent vitae semper odio. Curabitur condimentum lorem eget dapibus volutpat. Vivamus id tortor erat. Cras mollis varius dolor. Donec laoreet, ipsum sed sollicitudin placerat, nulla diam consequat nibh, sit amet lobortis diam turpis vitae dui. Aliquam dapibus diam nec porttitor egestas. Nam eu tristique orci, in tristique tortor. Sed est ex, scelerisque sed ligula a, condimentum maximus augue. Phasellus malesuada augue libero, eu consectetur magna rhoncus a. Sed ipsum tellus, viverra ut suscipit id, efficitur eu est.</p>
<p>Proin sagittis magna ac enim varius maximus. Quisque vel neque tincidunt, malesuada diam ut, bibendum tortor. Praesent feugiat ante egestas, convallis nisi at, ornare lacus. Nunc non sem vel orci posuere efficitur. Morbi accumsan ipsum ut turpis rhoncus, id ultricies nulla mollis. Sed purus diam, pellentesque vitae quam ac, hendrerit suscipit eros. Quisque euismod, nunc sit amet varius fermentum, sapien purus condimentum nunc, sit amet ultricies lacus turpis eu ante. Donec pulvinar iaculis blandit. Morbi quis ligula lorem. In in bibendum libero. Integer convallis elit eu ex lobortis, nec luctus libero ultrices. Nam ullamcorper posuere cursus. Ut feugiat, mauris scelerisque facilisis eleifend, magna massa maximus mi, at porttitor ex leo sit amet nisl. Praesent ligula purus, aliquet in commodo sit amet, porttitor ac velit. Nunc sodales elementum arcu, et fringilla libero ultricies ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</p>
<p>Ut nec interdum magna. Aenean sit amet vehicula neque. Nunc tincidunt ultrices tellus vitae pretium. Pellentesque posuere ultricies diam, ullamcorper hendrerit nibh ullamcorper in. Maecenas ut est et elit venenatis vestibulum. Vestibulum id hendrerit eros. Aliquam efficitur est elit, nec malesuada purus posuere ac. Morbi eu est porttitor, condimentum arcu eget, pretium nisi. Aliquam viverra enim vitae vulputate viverra. Nullam vitae metus sodales, finibus justo vel, efficitur neque. Morbi euismod rutrum tempus. Donec cursus lectus sed commodo vestibulum. Vivamus eu ligula consequat, cursus neque ac, tempus sapien.</p>
<p>Donec vel urna ac lacus consectetur cursus. Donec tempor justo ornare libero eleifend, id ultrices nisi tincidunt. Donec ac orci eget ligula auctor pretium sit amet eu purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc ac luctus elit. Sed consectetur, elit at consequat mollis, justo lectus pellentesque lectus, malesuada congue erat velit eu tortor. Donec ullamcorper nibh a dui convallis venenatis. In a ullamcorper nulla, id porttitor nunc. Praesent elit orci, aliquam vel nunc sed, scelerisque tincidunt ex. Duis consequat dignissim lacus, id porttitor libero fringilla quis. Fusce libero dolor, consectetur id pharetra at, tristique eget sem. Donec et mollis nunc, in aliquet ligula.</p>
<p>Cras pellentesque imperdiet laoreet. Aliquam erat volutpat. Pellentesque ultrices aliquet pretium. Integer auctor sem magna, eget condimentum sapien elementum ac. Nunc finibus feugiat aliquet. Quisque libero ligula, congue sit amet vestibulum at, euismod a elit. Vivamus eget augue et nunc lobortis hendrerit sed ut turpis. Donec et ante commodo, faucibus felis in, viverra libero. Aliquam erat volutpat. Duis euismod magna eget metus tincidunt dapibus. Curabitur malesuada efficitur venenatis. Fusce eu nisi sed purus hendrerit consectetur et ac tellus. Cras placerat dignissim mauris, egestas bibendum eros pulvinar non. Quisque finibus eget elit eu placerat. Mauris diam metus, imperdiet et libero sit amet, venenatis finibus libero. Cras eget laoreet justo.</p>
<p>Proin sit amet orci nec magna tincidunt vehicula. Praesent mauris elit, ullamcorper eget odio sed, pulvinar luctus tellus. Mauris tempus, magna tempus vulputate efficitur, elit lectus accumsan est, ultricies volutpat nulla ante in sapien. Morbi condimentum erat sit amet mattis ullamcorper. Nullam tincidunt nunc vel leo vulputate porttitor. Donec efficitur hendrerit nunc, non viverra libero scelerisque ac. Ut gravida nec ante vitae facilisis. Pellentesque sagittis urna sit amet egestas vestibulum.</p>
<p>Duis tempus dui in interdum ullamcorper. Curabitur vulputate laoreet est, dictum condimentum sapien vehicula eget. Pellentesque ac dictum mi. Sed metus arcu, sodales lobortis urna vel, feugiat ullamcorper est. Integer lacinia, lacus ac tristique convallis, nunc purus bibendum arcu, at eleifend enim est non ipsum. Nam iaculis elementum convallis. Nulla tempus odio vel porta ullamcorper. Donec dignissim ut elit vestibulum faucibus.</p>
<p>Aenean a pulvinar ante. Nunc rutrum volutpat tincidunt. Aenean ultricies sodales mauris eget suscipit. Proin rhoncus ornare lacus in auctor. Duis nec urna sit amet tortor ullamcorper sagittis non nec massa. Nullam dolor sem, laoreet sit amet elit in, iaculis consequat turpis. Morbi semper nulla vel egestas ultrices. Suspendisse id est iaculis, facilisis metus non, accumsan augue. Vestibulum arcu nulla, porta euismod felis et, sollicitudin vehicula ligula. Pellentesque ac dolor ac eros gravida tempus. Etiam sed sem ultrices, tincidunt purus eget, porttitor eros. Vivamus ut tempor sem. Donec interdum efficitur mollis.</p>
<p>In a laoreet ante. Suspendisse potenti. In sit amet enim elit. In arcu mauris, luctus a urna eget, aliquet accumsan tellus. Maecenas egestas, sem nec commodo tincidunt, metus tortor volutpat libero, eget tristique metus velit sed eros. Fusce bibendum lacus id lectus semper, id volutpat turpis dictum. Vestibulum eu elit eget eros dictum cursus. Mauris consectetur dolor eu ligula condimentum aliquam at id dui. Vestibulum non dolor ante. Morbi a dapibus erat. Nulla placerat mi id neque rhoncus, et semper dolor hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quam sem, dapibus non aliquet iaculis, mollis id urna.</p>
<p>Integer pellentesque enim a justo venenatis sodales. Etiam in nisl ipsum. Vestibulum fringilla dignissim faucibus. Nam pellentesque, mi ac accumsan mattis, elit velit bibendum lacus, id scelerisque ligula sapien id diam. Sed condimentum rutrum metus, in sollicitudin quam ultricies ut. Phasellus at lobortis arcu. Duis auctor, arcu id hendrerit faucibus, odio turpis finibus mi, molestie tempus ex lorem suscipit enim. Nam pretium laoreet ipsum. Donec eu mauris euismod, varius mi id, elementum leo. Integer ultricies nulla massa, in consequat lectus pellentesque ut. Ut eu risus mi. Pellentesque id ligula sodales, maximus lorem at, bibendum velit. Etiam vitae eros vitae quam lacinia egestas. Sed ullamcorper egestas magna, eget suscipit nulla euismod a. Morbi accumsan arcu a vulputate iaculis.</p>
</div>

Is there a way to calculate how far you have scrolled inside a div with overflow set to auto?

I need to find out how far I have scrolled inside a div. I can't use the window property to find this value as the window hasn't scrolled. Is there a way to accomplish this?

It's not difficult to do:
Grab the element that scrolls
Set an event listener for scroll to that element
Get the element's scrollTop value
const scrollyDiv = document.getElementById('scrollyDiv');
scrollyDiv.addEventListener('scroll', (e) => {
console.log(e.target.scrollTop)
})
Demo:
https://codepen.io/koralarts/pen/LoXYmZ

You can do this with JQuery by using $(document).scrollTop() :
$(document).scroll(function() {
console.log($(document).scrollTop());
})

Answer:
In combination with the scroll event you can use the properties scrollTop(MDN), scrollHeight(MDN), and the computed CSS height.
let {scrollTop, scrollHeight} = e.currentTarget,
height = +getComputedStyle(e.currentTarget)["height"].slice(0,-2);
note: we use the + operator to coerce the string returned by getComputedStyle and slice into a number. This is fine because we know exactly what we are getting (heights are always defined using px by default) and we know by slicing off px the value will always be a number. A more precise way of doing this if you're not sure of the returned value(a.e. rem) is to use a Regular Expression to remove non-numerals:
...
height = +getComputedStyle(e.currentTarget)["height"].replace(/\D/g, "");
what are these?
scrollTop is the distance scrolled from the top of the element. It starts at 0 and increments until you hit the scroll limit.
scrollHeight is the total distance, plus the original height of the element.
height is simply the height of the element.
Why is this important?
To determine how far you've scrolled you would use scrollTop out of (scrollHeight - height).
This is shown in the below example:
demo.addEventListener("scroll", function(e) {
let {scrollTop, scrollHeight} = e.currentTarget,
height = +getComputedStyle(e.currentTarget)["height"].slice(0,-2);
console.log("Scrolled " + parseInt(scrollTop) + " / " + parseInt(scrollHeight - height));
});
html, body {
overflow: hidden;
}
div {
position: relative;
width: 50%;
left: calc(50% - 25%);
overflow: auto;
height: 101vh;
background: rgba(20,20,100, .3);
padding: 0px;
margin: 0px;
}
<div id="demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tellus mauris, molestie eu vehicula quis, suscipit quis nisl. Fusce lorem purus, rhoncus eget dui nec, sagittis tincidunt odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam eget odio vitae nulla porttitor maximus a eget neque. Pellentesque dictum mollis ligula, a consequat tellus feugiat vitae. Donec rutrum elementum odio, vitae egestas tellus volutpat nec. Proin tempor, odio quis molestie iaculis, lectus nibh volutpat turpis, luctus rutrum ex felis sit amet velit. Donec blandit cursus tortor in malesuada. Vestibulum faucibus, lectus vel accumsan molestie, ligula velit pharetra leo, ac imperdiet nibh quam quis mi.
Pellentesque ac dui augue. Fusce sit amet condimentum dui. Donec sodales urna nec nisl commodo, ac porta magna consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec tincidunt tellus nunc, at accumsan orci scelerisque sed. Suspendisse facilisis feugiat massa, quis egestas sapien tempus nec. Curabitur nunc ipsum, ultricies sit amet nibh sed, tincidunt tristique diam. Cras sit amet scelerisque leo, a blandit dolor. Cras lobortis leo nec est luctus molestie. Curabitur non arcu malesuada, tincidunt dolor quis, bibendum orci. Vestibulum lobortis tortor ac erat consequat, ut consequat ex consectetur. Maecenas finibus efficitur orci, sit amet gravida ipsum vestibulum a. Aliquam quis dictum mi. Vivamus sagittis fringilla quam, sed feugiat libero lobortis nec. Praesent suscipit nulla at mollis rutrum. Sed et lacus at quam feugiat varius vitae et lectus.
Suspendisse feugiat lacus eget risus elementum convallis. Vestibulum fringilla mi ac mollis sagittis. Suspendisse vel sem tincidunt, condimentum urna at, dignissim magna. Curabitur pulvinar lectus eu massa pharetra facilisis. Quisque est nisl, feugiat vitae pellentesque vel, hendrerit sed enim. Ut at dui eget eros rhoncus venenatis malesuada sit amet ligula. Pellentesque cursus vulputate egestas. Sed euismod sem vel felis sollicitudin faucibus. Cras aliquet viverra turpis sit amet pulvinar. Aliquam pellentesque dolor a pulvinar egestas. Curabitur in sagittis sapien. Vestibulum nec ipsum a risus porttitor rhoncus vitae id ex. Ut mollis, ligula eu sollicitudin commodo, nibh nibh bibendum mi, vel luctus tellus est eget eros.
Aenean congue diam id urna tincidunt consectetur. Nunc vel semper ligula. Sed ultrices, odio eu venenatis interdum, ligula velit volutpat nisl, et malesuada eros massa id ante. Sed malesuada non nisl quis imperdiet. Praesent porta fringilla fermentum. Integer id massa at orci mollis accumsan in et dolor. Nullam nisi lectus, dignissim a dapibus id, posuere sed ex. Praesent consequat, dui non imperdiet aliquam, magna diam rhoncus enim, id molestie mauris nunc eget ante. Morbi et laoreet sapien, tempor malesuada tellus. Pellentesque lectus leo, egestas eget faucibus vitae, dapibus non enim. Duis eu leo sit amet augue molestie laoreet eu ut ipsum. Vestibulum nulla enim, tempus id varius ut, egestas non elit.
Sed tincidunt lorem sed tellus lobortis vulputate. Aliquam vel accumsan massa, id ornare arcu. Phasellus non erat ut erat mollis placerat. Aliquam laoreet laoreet eros, in elementum ex maximus quis. Pellentesque in dui at purus efficitur mattis. Etiam consequat, nunc vel feugiat fringilla, ante enim aliquet tellus, nec dapibus dui justo eget nibh. Praesent enim leo, tincidunt a dictum et, mollis at neque.
Fusce maximus, enim sed congue tempus, lorem tellus hendrerit massa, eget eleifend augue nisi eget eros. Aliquam vehicula eu enim et interdum. Nullam sollicitudin nisl sapien, quis euismod dolor vestibulum eget. Curabitur consectetur, nulla quis scelerisque tincidunt, sem turpis sagittis lacus, at tincidunt nunc felis et velit. Quisque nec malesuada lectus. Cras a lorem fermentum, tincidunt dolor a, dictum eros. Suspendisse augue tellus, cursus et ex sit amet, cursus sodales nibh. Pellentesque quis lacus aliquam libero bibendum eleifend. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin eget justo nec velit ultrices porttitor. Aenean vel accumsan arcu, sit amet finibus eros.
Sed ut convallis tortor, non dictum odio. Cras eu dictum sem. Cras laoreet lectus quis sapien volutpat bibendum. Vivamus ut finibus magna. Nunc aliquet tincidunt blandit. Pellentesque nisl tortor, malesuada eu est sed, congue fermentum nibh. Curabitur eu tellus nibh. Mauris quis eleifend lacus, id lacinia erat. Suspendisse id purus mauris. Cras ornare neque ac nulla blandit, eget faucibus turpis dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum mattis faucibus massa. Ut dignissim justo eget malesuada iaculis. Integer venenatis malesuada euismod. Nulla sollicitudin justo non consequat pharetra. Donec ultrices mi at neque tincidunt, in scelerisque sem vehicula.
Integer ac consectetur enim. Nunc sed fringilla magna. Nullam fermentum nisl nec venenatis condimentum. Mauris leo metus, convallis ut sem eu, tincidunt malesuada nunc. Cras metus lacus, sagittis ut convallis non, tempor vel turpis. Sed ultricies tristique odio id cursus. Praesent auctor ac ipsum faucibus ultrices. Donec id metus a sem aliquet suscipit. Maecenas mi sem, posuere non turpis id, vehicula placerat arcu. Curabitur tincidunt viverra neque ac pharetra. Curabitur vitae massa vehicula lorem tristique tempor. Duis congue nunc id lacus suscipit, ut laoreet enim malesuada.
Ut velit tellus, rhoncus a gravida id, aliquam quis dolor. Nam elementum purus non leo porttitor tempus. Curabitur tempor feugiat magna ac tempus. Ut cursus ultricies rutrum. Duis a feugiat arcu. Nullam bibendum metus sed nulla feugiat scelerisque vitae nec sem. Mauris aliquam vestibulum dui a commodo. Cras vel molestie metus. Quisque ac arcu odio. Phasellus pretium a leo non lacinia. Mauris et odio dui. Praesent commodo lorem eu erat pulvinar tincidunt. Praesent sagittis interdum mauris, eu egestas dolor volutpat dignissim. Duis posuere, arcu nec placerat ullamcorper, lectus nunc tempor mauris, vitae congue lacus arcu at enim.
Quisque eu massa sit amet dui accumsan pulvinar. Ut fermentum lectus eros, at iaculis enim consectetur quis. Ut semper, mi in vehicula lacinia, purus mi sagittis orci, rhoncus tristique magna leo vel purus. In congue feugiat arcu consequat pretium. Vestibulum sit amet pellentesque neque, a dignissim nisl. Maecenas ac dolor id justo feugiat varius vel sed turpis. Donec quis mi id nibh condimentum dictum. Mauris dapibus justo quam, ut fermentum diam ultrices et. Cras lobortis leo et finibus congue. Integer sed dui id mi efficitur efficitur. Quisque id gravida magna. Duis pharetra cursus metus vel pellentesque. Integer at magna ante. Donec aliquam nulla sem, at rhoncus ex tincidunt aliquam. Vestibulum sit amet hendrerit diam.
Mauris imperdiet dui eget massa malesuada mollis. Integer consectetur varius justo sit amet posuere. Aenean semper est at justo pulvinar finibus. Nunc ac maximus dui, a euismod orci. Mauris congue orci in ullamcorper pellentesque. Etiam tincidunt lorem id diam maximus elementum. Etiam in erat libero. Curabitur vehicula sodales mi, quis iaculis nulla consequat nec. Sed cursus lectus sed velit commodo, eu ultricies sapien pulvinar.
Nulla rutrum lacus est, vel lacinia ipsum euismod congue. Nunc vel vehicula orci. Sed eget nibh in dolor volutpat scelerisque. Ut porta viverra est, sed sollicitudin lorem euismod id. Proin interdum, lorem in luctus gravida, justo elit laoreet ante, nec malesuada diam mi ut lacus. Nunc nisl mi, hendrerit rutrum ligula id, auctor commodo ligula. Donec ullamcorper scelerisque sapien, vel feugiat justo molestie sed. Curabitur faucibus dignissim urna. Cras at sodales ante.
In varius, odio et feugiat hendrerit, lectus mauris faucibus mauris, at vulputate quam tellus vel sem. Fusce posuere turpis sem, porta imperdiet lorem feugiat a. Morbi iaculis dui nec accumsan scelerisque. Duis elit diam, fermentum non diam pretium, molestie venenatis nisl. Suspendisse faucibus dapibus ipsum nec placerat. Nulla sed pretium enim. Cras semper iaculis lacinia. Cras id vulputate orci, quis tristique ante. Phasellus nec suscipit tortor, viverra elementum augue.
Duis sed finibus dui. Nunc molestie vestibulum egestas. Sed in nisi dapibus, vehicula sem in, mattis orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque ut interdum lacus, id pulvinar risus. Donec blandit non sapien vitae gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Sed sit amet odio ut nulla consequat consectetur quis ut ipsum. Donec mollis sed neque quis luctus. Sed malesuada hendrerit tempor. Sed interdum maximus maximus. Cras placerat vel leo non fringilla. Praesent tincidunt semper malesuada. Vestibulum at tellus massa. Nulla nec lobortis urna. Duis lobortis pharetra odio, sed mattis quam congue non. Fusce elementum nisl metus, eget ultricies ex aliquet vel. Praesent fermentum tellus imperdiet rutrum fermentum. Donec mauris sapien, convallis non condimentum id, vehicula in diam. Nunc odio nisi, vehicula eu metus eu, lobortis faucibus sapien. Integer pulvinar maximus mauris, vel commodo est fringilla rhoncus.
Nam rutrum egestas molestie. Praesent urna odio, egestas quis ante in, rhoncus fermentum nisi. Ut pulvinar diam id tortor bibendum, mattis luctus nulla vulputate. Mauris arcu augue, imperdiet quis metus non, porttitor fringilla erat. Nulla vel venenatis elit, in placerat lectus. Fusce dui ante, commodo sit amet laoreet at, luctus quis ligula. In feugiat nibh a augue sollicitudin, eget pellentesque massa maximus. Aenean a velit id est cursus aliquam nec vel leo. Vestibulum non efficitur libero, non sodales felis. Cras a mauris eu metus mattis mollis. Integer ac nibh congue, iaculis arcu et, vestibulum ex. Sed vel orci blandit, blandit leo id, viverra enim. In lobortis diam sit amet risus cursus ultricies. Aliquam molestie porttitor velit, pellentesque placerat ligula pulvinar in. Vestibulum porta, est vitae elementum ultricies, turpis dolor lacinia nunc, id facilisis ante sem vehicula justo.
Nullam interdum sagittis ligula, id fringilla quam dignissim in. Vestibulum ac massa et lectus hendrerit finibus nec a lorem. Aenean at elementum enim, eu rhoncus purus. Maecenas porttitor sapien nec tristique rhoncus. Donec tortor velit, ultricies at posuere sed, laoreet sit amet nunc. In nulla magna, imperdiet ut ipsum eu, vehicula bibendum turpis. Etiam sed magna quis lectus tristique elementum. Aliquam felis nisi, varius eget turpis nec, volutpat tincidunt lectus. Donec elit massa, dapibus id velit eget, sodales vehicula ligula. Vestibulum varius libero lacinia auctor rhoncus. Aliquam placerat urna dolor, sit amet fringilla velit vehicula at. Nam quis nisl cursus, tempor eros quis, venenatis lorem.
Quisque a lectus in velit tincidunt sollicitudin a non sem. Proin feugiat orci et semper tempor. Nulla vulputate orci eu consectetur sagittis. Morbi auctor dui sit amet eros varius volutpat. Quisque in neque elit. Integer sollicitudin felis mattis, efficitur lorem et, vulputate odio. Etiam at augue ut libero tempus dapibus vitae varius purus. Sed in ipsum a neque faucibus placerat at ut eros. Etiam euismod eros nunc, sed vulputate purus dignissim id. Quisque egestas purus turpis, sed cursus sapien porttitor eget. Aliquam placerat neque eget nisl consectetur, et lobortis dolor congue. Vivamus tellus sapien, convallis quis vehicula at, ultricies nec quam. Phasellus arcu lacus, malesuada id est accumsan, ultricies viverra massa. Ut lorem sapien, lacinia sit amet metus id, vehicula vulputate eros. Aliquam lorem sapien, semper ac vehicula sit amet, efficitur sagittis lectus. Integer vel sapien aliquet, tempor augue ut, molestie libero.
</div>
Aside: How do I get percentages?
You would simply modify the above formula from:
scrollHeight - height
To:
scrollTop / ( scrollHeight - height) * 100
Percentage Example:
demo.addEventListener("scroll", function(e) {
let {scrollTop, scrollHeight} = e.currentTarget,
height = +getComputedStyle(e.currentTarget)["height"].slice(0,-2);
console.log("Scrolled " + parseInt((parseInt(scrollTop) / parseInt(scrollHeight - height)) * 100) + "% / 100% ");
});
html, body {
overflow: hidden;
}
div {
position: relative;
width: 50%;
left: calc(50% - 25%);
overflow: auto;
height: 101vh;
background: rgba(20,20,100, .3);
padding: 0px;
margin: 0px;
}
<div id="demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tellus mauris, molestie eu vehicula quis, suscipit quis nisl. Fusce lorem purus, rhoncus eget dui nec, sagittis tincidunt odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam eget odio vitae nulla porttitor maximus a eget neque. Pellentesque dictum mollis ligula, a consequat tellus feugiat vitae. Donec rutrum elementum odio, vitae egestas tellus volutpat nec. Proin tempor, odio quis molestie iaculis, lectus nibh volutpat turpis, luctus rutrum ex felis sit amet velit. Donec blandit cursus tortor in malesuada. Vestibulum faucibus, lectus vel accumsan molestie, ligula velit pharetra leo, ac imperdiet nibh quam quis mi.
Pellentesque ac dui augue. Fusce sit amet condimentum dui. Donec sodales urna nec nisl commodo, ac porta magna consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec tincidunt tellus nunc, at accumsan orci scelerisque sed. Suspendisse facilisis feugiat massa, quis egestas sapien tempus nec. Curabitur nunc ipsum, ultricies sit amet nibh sed, tincidunt tristique diam. Cras sit amet scelerisque leo, a blandit dolor. Cras lobortis leo nec est luctus molestie. Curabitur non arcu malesuada, tincidunt dolor quis, bibendum orci. Vestibulum lobortis tortor ac erat consequat, ut consequat ex consectetur. Maecenas finibus efficitur orci, sit amet gravida ipsum vestibulum a. Aliquam quis dictum mi. Vivamus sagittis fringilla quam, sed feugiat libero lobortis nec. Praesent suscipit nulla at mollis rutrum. Sed et lacus at quam feugiat varius vitae et lectus.
Suspendisse feugiat lacus eget risus elementum convallis. Vestibulum fringilla mi ac mollis sagittis. Suspendisse vel sem tincidunt, condimentum urna at, dignissim magna. Curabitur pulvinar lectus eu massa pharetra facilisis. Quisque est nisl, feugiat vitae pellentesque vel, hendrerit sed enim. Ut at dui eget eros rhoncus venenatis malesuada sit amet ligula. Pellentesque cursus vulputate egestas. Sed euismod sem vel felis sollicitudin faucibus. Cras aliquet viverra turpis sit amet pulvinar. Aliquam pellentesque dolor a pulvinar egestas. Curabitur in sagittis sapien. Vestibulum nec ipsum a risus porttitor rhoncus vitae id ex. Ut mollis, ligula eu sollicitudin commodo, nibh nibh bibendum mi, vel luctus tellus est eget eros.
Aenean congue diam id urna tincidunt consectetur. Nunc vel semper ligula. Sed ultrices, odio eu venenatis interdum, ligula velit volutpat nisl, et malesuada eros massa id ante. Sed malesuada non nisl quis imperdiet. Praesent porta fringilla fermentum. Integer id massa at orci mollis accumsan in et dolor. Nullam nisi lectus, dignissim a dapibus id, posuere sed ex. Praesent consequat, dui non imperdiet aliquam, magna diam rhoncus enim, id molestie mauris nunc eget ante. Morbi et laoreet sapien, tempor malesuada tellus. Pellentesque lectus leo, egestas eget faucibus vitae, dapibus non enim. Duis eu leo sit amet augue molestie laoreet eu ut ipsum. Vestibulum nulla enim, tempus id varius ut, egestas non elit.
Sed tincidunt lorem sed tellus lobortis vulputate. Aliquam vel accumsan massa, id ornare arcu. Phasellus non erat ut erat mollis placerat. Aliquam laoreet laoreet eros, in elementum ex maximus quis. Pellentesque in dui at purus efficitur mattis. Etiam consequat, nunc vel feugiat fringilla, ante enim aliquet tellus, nec dapibus dui justo eget nibh. Praesent enim leo, tincidunt a dictum et, mollis at neque.
Fusce maximus, enim sed congue tempus, lorem tellus hendrerit massa, eget eleifend augue nisi eget eros. Aliquam vehicula eu enim et interdum. Nullam sollicitudin nisl sapien, quis euismod dolor vestibulum eget. Curabitur consectetur, nulla quis scelerisque tincidunt, sem turpis sagittis lacus, at tincidunt nunc felis et velit. Quisque nec malesuada lectus. Cras a lorem fermentum, tincidunt dolor a, dictum eros. Suspendisse augue tellus, cursus et ex sit amet, cursus sodales nibh. Pellentesque quis lacus aliquam libero bibendum eleifend. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin eget justo nec velit ultrices porttitor. Aenean vel accumsan arcu, sit amet finibus eros.
Sed ut convallis tortor, non dictum odio. Cras eu dictum sem. Cras laoreet lectus quis sapien volutpat bibendum. Vivamus ut finibus magna. Nunc aliquet tincidunt blandit. Pellentesque nisl tortor, malesuada eu est sed, congue fermentum nibh. Curabitur eu tellus nibh. Mauris quis eleifend lacus, id lacinia erat. Suspendisse id purus mauris. Cras ornare neque ac nulla blandit, eget faucibus turpis dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum mattis faucibus massa. Ut dignissim justo eget malesuada iaculis. Integer venenatis malesuada euismod. Nulla sollicitudin justo non consequat pharetra. Donec ultrices mi at neque tincidunt, in scelerisque sem vehicula.
Integer ac consectetur enim. Nunc sed fringilla magna. Nullam fermentum nisl nec venenatis condimentum. Mauris leo metus, convallis ut sem eu, tincidunt malesuada nunc. Cras metus lacus, sagittis ut convallis non, tempor vel turpis. Sed ultricies tristique odio id cursus. Praesent auctor ac ipsum faucibus ultrices. Donec id metus a sem aliquet suscipit. Maecenas mi sem, posuere non turpis id, vehicula placerat arcu. Curabitur tincidunt viverra neque ac pharetra. Curabitur vitae massa vehicula lorem tristique tempor. Duis congue nunc id lacus suscipit, ut laoreet enim malesuada.
Ut velit tellus, rhoncus a gravida id, aliquam quis dolor. Nam elementum purus non leo porttitor tempus. Curabitur tempor feugiat magna ac tempus. Ut cursus ultricies rutrum. Duis a feugiat arcu. Nullam bibendum metus sed nulla feugiat scelerisque vitae nec sem. Mauris aliquam vestibulum dui a commodo. Cras vel molestie metus. Quisque ac arcu odio. Phasellus pretium a leo non lacinia. Mauris et odio dui. Praesent commodo lorem eu erat pulvinar tincidunt. Praesent sagittis interdum mauris, eu egestas dolor volutpat dignissim. Duis posuere, arcu nec placerat ullamcorper, lectus nunc tempor mauris, vitae congue lacus arcu at enim.
Quisque eu massa sit amet dui accumsan pulvinar. Ut fermentum lectus eros, at iaculis enim consectetur quis. Ut semper, mi in vehicula lacinia, purus mi sagittis orci, rhoncus tristique magna leo vel purus. In congue feugiat arcu consequat pretium. Vestibulum sit amet pellentesque neque, a dignissim nisl. Maecenas ac dolor id justo feugiat varius vel sed turpis. Donec quis mi id nibh condimentum dictum. Mauris dapibus justo quam, ut fermentum diam ultrices et. Cras lobortis leo et finibus congue. Integer sed dui id mi efficitur efficitur. Quisque id gravida magna. Duis pharetra cursus metus vel pellentesque. Integer at magna ante. Donec aliquam nulla sem, at rhoncus ex tincidunt aliquam. Vestibulum sit amet hendrerit diam.
Mauris imperdiet dui eget massa malesuada mollis. Integer consectetur varius justo sit amet posuere. Aenean semper est at justo pulvinar finibus. Nunc ac maximus dui, a euismod orci. Mauris congue orci in ullamcorper pellentesque. Etiam tincidunt lorem id diam maximus elementum. Etiam in erat libero. Curabitur vehicula sodales mi, quis iaculis nulla consequat nec. Sed cursus lectus sed velit commodo, eu ultricies sapien pulvinar.
Nulla rutrum lacus est, vel lacinia ipsum euismod congue. Nunc vel vehicula orci. Sed eget nibh in dolor volutpat scelerisque. Ut porta viverra est, sed sollicitudin lorem euismod id. Proin interdum, lorem in luctus gravida, justo elit laoreet ante, nec malesuada diam mi ut lacus. Nunc nisl mi, hendrerit rutrum ligula id, auctor commodo ligula. Donec ullamcorper scelerisque sapien, vel feugiat justo molestie sed. Curabitur faucibus dignissim urna. Cras at sodales ante.
In varius, odio et feugiat hendrerit, lectus mauris faucibus mauris, at vulputate quam tellus vel sem. Fusce posuere turpis sem, porta imperdiet lorem feugiat a. Morbi iaculis dui nec accumsan scelerisque. Duis elit diam, fermentum non diam pretium, molestie venenatis nisl. Suspendisse faucibus dapibus ipsum nec placerat. Nulla sed pretium enim. Cras semper iaculis lacinia. Cras id vulputate orci, quis tristique ante. Phasellus nec suscipit tortor, viverra elementum augue.
Duis sed finibus dui. Nunc molestie vestibulum egestas. Sed in nisi dapibus, vehicula sem in, mattis orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque ut interdum lacus, id pulvinar risus. Donec blandit non sapien vitae gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Sed sit amet odio ut nulla consequat consectetur quis ut ipsum. Donec mollis sed neque quis luctus. Sed malesuada hendrerit tempor. Sed interdum maximus maximus. Cras placerat vel leo non fringilla. Praesent tincidunt semper malesuada. Vestibulum at tellus massa. Nulla nec lobortis urna. Duis lobortis pharetra odio, sed mattis quam congue non. Fusce elementum nisl metus, eget ultricies ex aliquet vel. Praesent fermentum tellus imperdiet rutrum fermentum. Donec mauris sapien, convallis non condimentum id, vehicula in diam. Nunc odio nisi, vehicula eu metus eu, lobortis faucibus sapien. Integer pulvinar maximus mauris, vel commodo est fringilla rhoncus.
Nam rutrum egestas molestie. Praesent urna odio, egestas quis ante in, rhoncus fermentum nisi. Ut pulvinar diam id tortor bibendum, mattis luctus nulla vulputate. Mauris arcu augue, imperdiet quis metus non, porttitor fringilla erat. Nulla vel venenatis elit, in placerat lectus. Fusce dui ante, commodo sit amet laoreet at, luctus quis ligula. In feugiat nibh a augue sollicitudin, eget pellentesque massa maximus. Aenean a velit id est cursus aliquam nec vel leo. Vestibulum non efficitur libero, non sodales felis. Cras a mauris eu metus mattis mollis. Integer ac nibh congue, iaculis arcu et, vestibulum ex. Sed vel orci blandit, blandit leo id, viverra enim. In lobortis diam sit amet risus cursus ultricies. Aliquam molestie porttitor velit, pellentesque placerat ligula pulvinar in. Vestibulum porta, est vitae elementum ultricies, turpis dolor lacinia nunc, id facilisis ante sem vehicula justo.
Nullam interdum sagittis ligula, id fringilla quam dignissim in. Vestibulum ac massa et lectus hendrerit finibus nec a lorem. Aenean at elementum enim, eu rhoncus purus. Maecenas porttitor sapien nec tristique rhoncus. Donec tortor velit, ultricies at posuere sed, laoreet sit amet nunc. In nulla magna, imperdiet ut ipsum eu, vehicula bibendum turpis. Etiam sed magna quis lectus tristique elementum. Aliquam felis nisi, varius eget turpis nec, volutpat tincidunt lectus. Donec elit massa, dapibus id velit eget, sodales vehicula ligula. Vestibulum varius libero lacinia auctor rhoncus. Aliquam placerat urna dolor, sit amet fringilla velit vehicula at. Nam quis nisl cursus, tempor eros quis, venenatis lorem.
Quisque a lectus in velit tincidunt sollicitudin a non sem. Proin feugiat orci et semper tempor. Nulla vulputate orci eu consectetur sagittis. Morbi auctor dui sit amet eros varius volutpat. Quisque in neque elit. Integer sollicitudin felis mattis, efficitur lorem et, vulputate odio. Etiam at augue ut libero tempus dapibus vitae varius purus. Sed in ipsum a neque faucibus placerat at ut eros. Etiam euismod eros nunc, sed vulputate purus dignissim id. Quisque egestas purus turpis, sed cursus sapien porttitor eget. Aliquam placerat neque eget nisl consectetur, et lobortis dolor congue. Vivamus tellus sapien, convallis quis vehicula at, ultricies nec quam. Phasellus arcu lacus, malesuada id est accumsan, ultricies viverra massa. Ut lorem sapien, lacinia sit amet metus id, vehicula vulputate eros. Aliquam lorem sapien, semper ac vehicula sit amet, efficitur sagittis lectus. Integer vel sapien aliquet, tempor augue ut, molestie libero.
</div>

My onscroll event is not firing my java script function

I'm trying to say in my code that if the user scrolls down 250px, I want the data-percent to go from 0% to 100% and this is done in "myFunction". I am still new to JS so I'm having trouble understanding why it's not working when I scroll past 250px. Any help would be much appreciated!
var div = document.getElementById('div1');
window.onscroll = myFunction();
function myFunction() {
if (document.body.scrollTop > 250 || document.documentElement.scrollTop > 250) {
div.getAttribute('data-percent').value = "100%";
} else {
div.getAttribute('data-percent').value = "";
}
}
<div id="div1" class="skillbar clearfix " data-percent="100%">
<div class="skillbar-title" style="background: #d35400;"><span>HTML5</span></div>
<div class="skillbar-bar" style="background: #e67e22;"></div>
<div class="skill-bar-percent">100%</div>
</div>
I expect the data-percent attribute to go from 0% to 100% when I scroll past 250px, and then back to 0% when I scroll back up.

I fixed the header to the top of the page so you could see it, and added some filler text to make it scroll, but the issue was that your code only called myFunction as soon as the page loaded - it wasn't doing anything else. You needed to change the call of myFunction into a reference to myFunction by removing the parentheses.
var div = document.getElementById('div1');
window.onscroll = myFunction;
function myFunction() {
if (document.body.scrollTop > 250 || document.documentElement.scrollTop > 250) {
div.getAttribute('data-percent').value = "100%";
div.querySelector(".skill-bar-percent").textContent = "100%";
} else {
div.getAttribute('data-percent').value = "";
div.querySelector(".skill-bar-percent").textContent = "0%";
}
}
<div id="div1" class="skillbar clearfix " data-percent="100%" style="position: fixed; top: 0; background-color: white; display: block;">
<div class="skillbar-title" style="background: #d35400;"><span>HTML5</span></div>
<div class="skillbar-bar" style="background: #e67e22;"></div>
<div class="skill-bar-percent">0%</div>
</div>
<br />
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus facilisis dolor, mollis consequat justo vestibulum in. Pellentesque ac laoreet turpis. Duis eget sodales elit. In eget eros vitae nibh laoreet viverra. Fusce tincidunt tortor id metus iaculis, in pulvinar urna consectetur. Nunc in leo non lacus volutpat rhoncus. Vestibulum aliquet tortor quis vehicula tempor. Vivamus faucibus orci nec condimentum consequat. Vestibulum vestibulum venenatis tincidunt. Donec non velit nulla. Nunc tellus est, feugiat quis interdum luctus, rhoncus non nisi. Aenean sagittis sed nisl sit amet vehicula. Nulla maximus at lacus eget tristique. Curabitur dignissim ligula et massa rhoncus, id lobortis odio dignissim. Sed ut dolor ac libero lacinia laoreet nec eu urna. Morbi justo lectus, ultrices ac tellus ut, lobortis semper risus.</p>
<p>Phasellus tempor dignissim odio, sodales vulputate metus facilisis sit amet. Maecenas vestibulum dapibus ipsum, nec bibendum neque tempor eget. Nunc ullamcorper, libero et semper condimentum, nibh mi pretium nisi, a hendrerit elit nunc sed metus. Duis lacinia quis dui ut interdum. In efficitur vitae magna sit amet aliquam. Pellentesque quis ullamcorper lorem. Etiam id ullamcorper velit. Suspendisse id tristique ante, suscipit facilisis nisl. Ut ac orci quis augue ornare egestas a id eros. Curabitur dictum eros mauris, lacinia vulputate diam dignissim at. Curabitur venenatis posuere lorem, non maximus lectus lobortis in.</p>
<p>Praesent in finibus purus. Maecenas nec rutrum mi. Donec molestie rhoncus ex vel laoreet. Duis id leo sit amet nisi tristique porta non at enim. Suspendisse eu pharetra lorem. Nunc posuere odio nisl, id iaculis felis fringilla ut. Proin aliquam sapien quis tortor vestibulum interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque gravida bibendum urna, tincidunt venenatis ligula egestas vitae. Fusce accumsan ligula et diam porta, id finibus felis vulputate.</p>
<p>Ut eleifend venenatis quam, vel ultricies diam vestibulum sit amet. Vestibulum accumsan eu felis et dictum. Cras turpis tellus, sodales ut nibh accumsan, rutrum ullamcorper ligula. Donec mollis sem eros, vitae finibus dui ullamcorper vel. Mauris sodales diam ut dictum mattis. Nam varius nisi ac efficitur dapibus. Nam dignissim, dolor at suscipit dignissim, ipsum eros mollis risus, eget facilisis lacus dolor id nisl. Vivamus dictum rutrum neque, vel accumsan lacus vulputate in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vel tortor sed mi faucibus egestas non maximus enim. Suspendisse sed mi sagittis, imperdiet felis sed, tristique nisi. Proin porta nisi at pretium volutpat. Quisque nec nisl dictum, dignissim erat sit amet, vestibulum dui.</p>
<p>Curabitur vitae consectetur felis. In quis ligula metus. Nunc mauris ex, viverra in suscipit in, ultricies id lorem. Sed ac libero at velit iaculis placerat vitae in odio. Sed tortor dui, lobortis nec pretium ut, ullamcorper a dui. Praesent congue erat sed ultrices pretium. Nullam consequat orci at ex aliquet, vitae aliquet lorem suscipit. Maecenas nisi purus, semper eu lorem vel, elementum dapibus quam. Suspendisse potenti. Nulla augue enim, vulputate a fringilla eget, sollicitudin nec turpis. Aenean vitae pulvinar ante. Nam ex dui, gravida a nunc sed, tristique lacinia sapien. Sed auctor laoreet nisl, et maximus risus. Fusce finibus bibendum mauris. Ut cursus euismod eros non dapibus. Sed luctus eleifend lorem venenatis aliquam.</p>
<p>Morbi volutpat velit vitae est molestie, nec porttitor orci tempus. Suspendisse lorem arcu, elementum sit amet diam sit amet, pharetra laoreet metus. Integer posuere sapien porta, placerat odio lobortis, sollicitudin augue. Integer mattis arcu est, gravida porta justo ultrices a. Etiam egestas in ante at interdum. Cras sodales at lectus nec interdum. Donec ac posuere ligula, id dictum lectus. Nullam et elit non nunc convallis pulvinar. Pellentesque vitae pulvinar ex. Etiam a mattis risus, vitae gravida neque.</p>
<p>Nullam vestibulum nisl a faucibus sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis gravida sem at aliquam. Vestibulum id enim suscipit, condimentum ipsum ut, egestas libero. Proin et leo ac eros hendrerit tincidunt dapibus ac urna. Integer tincidunt, est et faucibus malesuada, purus ligula ultricies velit, quis rutrum lacus quam non neque. Sed facilisis ipsum eget nisl consectetur sollicitudin. Donec sodales massa non quam ornare tristique. Suspendisse condimentum dui dolor, in ultrices leo laoreet non.</p>
<p>Morbi mattis, mi nec fringilla dignissim, nisl risus pharetra massa, in luctus sem magna at ex. Nullam aliquam ultricies dolor, eget maximus eros auctor sed. Suspendisse sodales orci a elementum dignissim. Maecenas vulputate pharetra nisl vel cursus. Sed sit amet molestie lacus. Etiam fringilla maximus velit at posuere. Vestibulum non metus non sapien molestie tempor. Ut tincidunt faucibus lectus. Aliquam scelerisque ligula vel dictum fermentum. Donec egestas velit consequat vehicula condimentum. Etiam semper rhoncus efficitur. Ut ut leo pretium nisi pharetra pharetra. Nullam elementum, metus at sollicitudin convallis, mauris eros sagittis justo, quis venenatis ante magna dignissim nisl. Donec sit amet tempus tellus, id ultrices quam. Aliquam dui dolor, placerat non metus ut, mattis imperdiet nisi. Maecenas ultrices felis lacus, ut mattis ipsum laoreet vitae.</p>
<p>Fusce commodo faucibus volutpat. Nulla tristique libero at mi ultricies, scelerisque lobortis risus accumsan. Vestibulum iaculis, est a blandit eleifend, lorem justo porttitor arcu, a feugiat arcu magna eget nulla. Mauris posuere massa vitae diam pretium placerat nec ut ex. Ut porttitor nisi sit amet felis eleifend, non fermentum nibh placerat. In molestie mi a mi rutrum tempus. Praesent fringilla semper mi, at accumsan lorem lobortis euismod.</p>
<p>Fusce fermentum interdum leo non auctor. In hac habitasse platea dictumst. Pellentesque lectus ante, vehicula ac blandit dictum, pulvinar non tortor. Ut faucibus erat luctus, convallis magna non, ornare dolor. Sed dictum, nunc non iaculis pharetra, mi nisl pretium libero, at tincidunt massa felis eu mauris. Maecenas sit amet lorem non enim finibus posuere. Ut pulvinar aliquam convallis. Maecenas eu purus nec tortor bibendum maximus in quis enim. Fusce vehicula leo non felis posuere aliquet. Nam aliquet mauris nec felis dictum, non semper diam efficitur. Duis blandit euismod vestibulum. Nulla quis leo venenatis, volutpat ex sit amet, vulputate enim. Morbi varius arcu id tortor egestas ornare. Etiam porttitor et elit et condimentum. Maecenas libero felis, consequat varius pharetra non, tempor eget lacus. Fusce vel volutpat ante, vel feugiat nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus facilisis dolor, mollis consequat justo vestibulum in. Pellentesque ac laoreet turpis. Duis eget sodales elit. In eget eros vitae nibh laoreet viverra. Fusce tincidunt tortor id metus iaculis, in pulvinar urna consectetur. Nunc in leo non lacus volutpat rhoncus. Vestibulum aliquet tortor quis vehicula tempor. Vivamus faucibus orci nec condimentum consequat. Vestibulum vestibulum venenatis tincidunt. Donec non velit nulla. Nunc tellus est, feugiat quis interdum luctus, rhoncus non nisi. Aenean sagittis sed nisl sit amet vehicula. Nulla maximus at lacus eget tristique. Curabitur dignissim ligula et massa rhoncus, id lobortis odio dignissim. Sed ut dolor ac libero lacinia laoreet nec eu urna. Morbi justo lectus, ultrices ac tellus ut, lobortis semper risus.</p>
<p>Phasellus tempor dignissim odio, sodales vulputate metus facilisis sit amet. Maecenas vestibulum dapibus ipsum, nec bibendum neque tempor eget. Nunc ullamcorper, libero et semper condimentum, nibh mi pretium nisi, a hendrerit elit nunc sed metus. Duis lacinia quis dui ut interdum. In efficitur vitae magna sit amet aliquam. Pellentesque quis ullamcorper lorem. Etiam id ullamcorper velit. Suspendisse id tristique ante, suscipit facilisis nisl. Ut ac orci quis augue ornare egestas a id eros. Curabitur dictum eros mauris, lacinia vulputate diam dignissim at. Curabitur venenatis posuere lorem, non maximus lectus lobortis in.</p>
<p>Praesent in finibus purus. Maecenas nec rutrum mi. Donec molestie rhoncus ex vel laoreet. Duis id leo sit amet nisi tristique porta non at enim. Suspendisse eu pharetra lorem. Nunc posuere odio nisl, id iaculis felis fringilla ut. Proin aliquam sapien quis tortor vestibulum interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque gravida bibendum urna, tincidunt venenatis ligula egestas vitae. Fusce accumsan ligula et diam porta, id finibus felis vulputate.</p>
<p>Ut eleifend venenatis quam, vel ultricies diam vestibulum sit amet. Vestibulum accumsan eu felis et dictum. Cras turpis tellus, sodales ut nibh accumsan, rutrum ullamcorper ligula. Donec mollis sem eros, vitae finibus dui ullamcorper vel. Mauris sodales diam ut dictum mattis. Nam varius nisi ac efficitur dapibus. Nam dignissim, dolor at suscipit dignissim, ipsum eros mollis risus, eget facilisis lacus dolor id nisl. Vivamus dictum rutrum neque, vel accumsan lacus vulputate in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vel tortor sed mi faucibus egestas non maximus enim. Suspendisse sed mi sagittis, imperdiet felis sed, tristique nisi. Proin porta nisi at pretium volutpat. Quisque nec nisl dictum, dignissim erat sit amet, vestibulum dui.</p>
<p>Curabitur vitae consectetur felis. In quis ligula metus. Nunc mauris ex, viverra in suscipit in, ultricies id lorem. Sed ac libero at velit iaculis placerat vitae in odio. Sed tortor dui, lobortis nec pretium ut, ullamcorper a dui. Praesent congue erat sed ultrices pretium. Nullam consequat orci at ex aliquet, vitae aliquet lorem suscipit. Maecenas nisi purus, semper eu lorem vel, elementum dapibus quam. Suspendisse potenti. Nulla augue enim, vulputate a fringilla eget, sollicitudin nec turpis. Aenean vitae pulvinar ante. Nam ex dui, gravida a nunc sed, tristique lacinia sapien. Sed auctor laoreet nisl, et maximus risus. Fusce finibus bibendum mauris. Ut cursus euismod eros non dapibus. Sed luctus eleifend lorem venenatis aliquam.</p>
<p>Morbi volutpat velit vitae est molestie, nec porttitor orci tempus. Suspendisse lorem arcu, elementum sit amet diam sit amet, pharetra laoreet metus. Integer posuere sapien porta, placerat odio lobortis, sollicitudin augue. Integer mattis arcu est, gravida porta justo ultrices a. Etiam egestas in ante at interdum. Cras sodales at lectus nec interdum. Donec ac posuere ligula, id dictum lectus. Nullam et elit non nunc convallis pulvinar. Pellentesque vitae pulvinar ex. Etiam a mattis risus, vitae gravida neque.</p>
<p>Nullam vestibulum nisl a faucibus sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis gravida sem at aliquam. Vestibulum id enim suscipit, condimentum ipsum ut, egestas libero. Proin et leo ac eros hendrerit tincidunt dapibus ac urna. Integer tincidunt, est et faucibus malesuada, purus ligula ultricies velit, quis rutrum lacus quam non neque. Sed facilisis ipsum eget nisl consectetur sollicitudin. Donec sodales massa non quam ornare tristique. Suspendisse condimentum dui dolor, in ultrices leo laoreet non.</p>
<p>Morbi mattis, mi nec fringilla dignissim, nisl risus pharetra massa, in luctus sem magna at ex. Nullam aliquam ultricies dolor, eget maximus eros auctor sed. Suspendisse sodales orci a elementum dignissim. Maecenas vulputate pharetra nisl vel cursus. Sed sit amet molestie lacus. Etiam fringilla maximus velit at posuere. Vestibulum non metus non sapien molestie tempor. Ut tincidunt faucibus lectus. Aliquam scelerisque ligula vel dictum fermentum. Donec egestas velit consequat vehicula condimentum. Etiam semper rhoncus efficitur. Ut ut leo pretium nisi pharetra pharetra. Nullam elementum, metus at sollicitudin convallis, mauris eros sagittis justo, quis venenatis ante magna dignissim nisl. Donec sit amet tempus tellus, id ultrices quam. Aliquam dui dolor, placerat non metus ut, mattis imperdiet nisi. Maecenas ultrices felis lacus, ut mattis ipsum laoreet vitae.</p>
<p>Fusce commodo faucibus volutpat. Nulla tristique libero at mi ultricies, scelerisque lobortis risus accumsan. Vestibulum iaculis, est a blandit eleifend, lorem justo porttitor arcu, a feugiat arcu magna eget nulla. Mauris posuere massa vitae diam pretium placerat nec ut ex. Ut porttitor nisi sit amet felis eleifend, non fermentum nibh placerat. In molestie mi a mi rutrum tempus. Praesent fringilla semper mi, at accumsan lorem lobortis euismod.</p>
<p>Fusce fermentum interdum leo non auctor. In hac habitasse platea dictumst. Pellentesque lectus ante, vehicula ac blandit dictum, pulvinar non tortor. Ut faucibus erat luctus, convallis magna non, ornare dolor. Sed dictum, nunc non iaculis pharetra, mi nisl pretium libero, at tincidunt massa felis eu mauris. Maecenas sit amet lorem non enim finibus posuere. Ut pulvinar aliquam convallis. Maecenas eu purus nec tortor bibendum maximus in quis enim. Fusce vehicula leo non felis posuere aliquet. Nam aliquet mauris nec felis dictum, non semper diam efficitur. Duis blandit euismod vestibulum. Nulla quis leo venenatis, volutpat ex sit amet, vulputate enim. Morbi varius arcu id tortor egestas ornare. Etiam porttitor et elit et condimentum. Maecenas libero felis, consequat varius pharetra non, tempor eget lacus. Fusce vel volutpat ante, vel feugiat nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus facilisis dolor, mollis consequat justo vestibulum in. Pellentesque ac laoreet turpis. Duis eget sodales elit. In eget eros vitae nibh laoreet viverra. Fusce tincidunt tortor id metus iaculis, in pulvinar urna consectetur. Nunc in leo non lacus volutpat rhoncus. Vestibulum aliquet tortor quis vehicula tempor. Vivamus faucibus orci nec condimentum consequat. Vestibulum vestibulum venenatis tincidunt. Donec non velit nulla. Nunc tellus est, feugiat quis interdum luctus, rhoncus non nisi. Aenean sagittis sed nisl sit amet vehicula. Nulla maximus at lacus eget tristique. Curabitur dignissim ligula et massa rhoncus, id lobortis odio dignissim. Sed ut dolor ac libero lacinia laoreet nec eu urna. Morbi justo lectus, ultrices ac tellus ut, lobortis semper risus.</p>
<p>Phasellus tempor dignissim odio, sodales vulputate metus facilisis sit amet. Maecenas vestibulum dapibus ipsum, nec bibendum neque tempor eget. Nunc ullamcorper, libero et semper condimentum, nibh mi pretium nisi, a hendrerit elit nunc sed metus. Duis lacinia quis dui ut interdum. In efficitur vitae magna sit amet aliquam. Pellentesque quis ullamcorper lorem. Etiam id ullamcorper velit. Suspendisse id tristique ante, suscipit facilisis nisl. Ut ac orci quis augue ornare egestas a id eros. Curabitur dictum eros mauris, lacinia vulputate diam dignissim at. Curabitur venenatis posuere lorem, non maximus lectus lobortis in.</p>
<p>Praesent in finibus purus. Maecenas nec rutrum mi. Donec molestie rhoncus ex vel laoreet. Duis id leo sit amet nisi tristique porta non at enim. Suspendisse eu pharetra lorem. Nunc posuere odio nisl, id iaculis felis fringilla ut. Proin aliquam sapien quis tortor vestibulum interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque gravida bibendum urna, tincidunt venenatis ligula egestas vitae. Fusce accumsan ligula et diam porta, id finibus felis vulputate.</p>
<p>Ut eleifend venenatis quam, vel ultricies diam vestibulum sit amet. Vestibulum accumsan eu felis et dictum. Cras turpis tellus, sodales ut nibh accumsan, rutrum ullamcorper ligula. Donec mollis sem eros, vitae finibus dui ullamcorper vel. Mauris sodales diam ut dictum mattis. Nam varius nisi ac efficitur dapibus. Nam dignissim, dolor at suscipit dignissim, ipsum eros mollis risus, eget facilisis lacus dolor id nisl. Vivamus dictum rutrum neque, vel accumsan lacus vulputate in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vel tortor sed mi faucibus egestas non maximus enim. Suspendisse sed mi sagittis, imperdiet felis sed, tristique nisi. Proin porta nisi at pretium volutpat. Quisque nec nisl dictum, dignissim erat sit amet, vestibulum dui.</p>
<p>Curabitur vitae consectetur felis. In quis ligula metus. Nunc mauris ex, viverra in suscipit in, ultricies id lorem. Sed ac libero at velit iaculis placerat vitae in odio. Sed tortor dui, lobortis nec pretium ut, ullamcorper a dui. Praesent congue erat sed ultrices pretium. Nullam consequat orci at ex aliquet, vitae aliquet lorem suscipit. Maecenas nisi purus, semper eu lorem vel, elementum dapibus quam. Suspendisse potenti. Nulla augue enim, vulputate a fringilla eget, sollicitudin nec turpis. Aenean vitae pulvinar ante. Nam ex dui, gravida a nunc sed, tristique lacinia sapien. Sed auctor laoreet nisl, et maximus risus. Fusce finibus bibendum mauris. Ut cursus euismod eros non dapibus. Sed luctus eleifend lorem venenatis aliquam.</p>
<p>Morbi volutpat velit vitae est molestie, nec porttitor orci tempus. Suspendisse lorem arcu, elementum sit amet diam sit amet, pharetra laoreet metus. Integer posuere sapien porta, placerat odio lobortis, sollicitudin augue. Integer mattis arcu est, gravida porta justo ultrices a. Etiam egestas in ante at interdum. Cras sodales at lectus nec interdum. Donec ac posuere ligula, id dictum lectus. Nullam et elit non nunc convallis pulvinar. Pellentesque vitae pulvinar ex. Etiam a mattis risus, vitae gravida neque.</p>
<p>Nullam vestibulum nisl a faucibus sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis gravida sem at aliquam. Vestibulum id enim suscipit, condimentum ipsum ut, egestas libero. Proin et leo ac eros hendrerit tincidunt dapibus ac urna. Integer tincidunt, est et faucibus malesuada, purus ligula ultricies velit, quis rutrum lacus quam non neque. Sed facilisis ipsum eget nisl consectetur sollicitudin. Donec sodales massa non quam ornare tristique. Suspendisse condimentum dui dolor, in ultrices leo laoreet non.</p>
<p>Morbi mattis, mi nec fringilla dignissim, nisl risus pharetra massa, in luctus sem magna at ex. Nullam aliquam ultricies dolor, eget maximus eros auctor sed. Suspendisse sodales orci a elementum dignissim. Maecenas vulputate pharetra nisl vel cursus. Sed sit amet molestie lacus. Etiam fringilla maximus velit at posuere. Vestibulum non metus non sapien molestie tempor. Ut tincidunt faucibus lectus. Aliquam scelerisque ligula vel dictum fermentum. Donec egestas velit consequat vehicula condimentum. Etiam semper rhoncus efficitur. Ut ut leo pretium nisi pharetra pharetra. Nullam elementum, metus at sollicitudin convallis, mauris eros sagittis justo, quis venenatis ante magna dignissim nisl. Donec sit amet tempus tellus, id ultrices quam. Aliquam dui dolor, placerat non metus ut, mattis imperdiet nisi. Maecenas ultrices felis lacus, ut mattis ipsum laoreet vitae.</p>
<p>Fusce commodo faucibus volutpat. Nulla tristique libero at mi ultricies, scelerisque lobortis risus accumsan. Vestibulum iaculis, est a blandit eleifend, lorem justo porttitor arcu, a feugiat arcu magna eget nulla. Mauris posuere massa vitae diam pretium placerat nec ut ex. Ut porttitor nisi sit amet felis eleifend, non fermentum nibh placerat. In molestie mi a mi rutrum tempus. Praesent fringilla semper mi, at accumsan lorem lobortis euismod.</p>
<p>Fusce fermentum interdum leo non auctor. In hac habitasse platea dictumst. Pellentesque lectus ante, vehicula ac blandit dictum, pulvinar non tortor. Ut faucibus erat luctus, convallis magna non, ornare dolor. Sed dictum, nunc non iaculis pharetra, mi nisl pretium libero, at tincidunt massa felis eu mauris. Maecenas sit amet lorem non enim finibus posuere. Ut pulvinar aliquam convallis. Maecenas eu purus nec tortor bibendum maximus in quis enim. Fusce vehicula leo non felis posuere aliquet. Nam aliquet mauris nec felis dictum, non semper diam efficitur. Duis blandit euismod vestibulum. Nulla quis leo venenatis, volutpat ex sit amet, vulputate enim. Morbi varius arcu id tortor egestas ornare. Etiam porttitor et elit et condimentum. Maecenas libero felis, consequat varius pharetra non, tempor eget lacus. Fusce vel volutpat ante, vel feugiat nulla.</p>

You need to change:
window.onscroll = myFunction();
Into
window.onscroll = function() {myFunction()};
Why? because the onscroll is an Event that executes a function after something had happened (Scroll Event in our case).
But when you use use the the code like window.onscroll = myFunction(); the JS engine will immediately invoke the function regardless to the scroll event as soon as he sees this line of code.

You need to do two changes to achive what you are looking :
First as Shahar mentioned, you need to change the way you run the function :
window.onscroll = function() {myFunction()};
And the other thing, you are using getAttribute method to update the value of your attribute, you need to use setAttribute instead :
div.setAttribute('data-percent', '100%');
And maybe add a height to your div with css to actually be able to scroll :
#div1{height:700px}
https://jsfiddle.net/odpzLtec/

How to disable mousewheel scroll in chrome with javascript/jquery [duplicate]

This question already has answers here:
Disabling mouse scrolling
(4 answers)
Closed 3 years ago.
I used
$('body').bind("mousewheel", function() {
return false;
});
It's working at first. but suddenly it wasn't working at all.
On chrome console wrote the issue:
"[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.
https://www.chromestatus.com/features/6662647093133312"
Is there other way to disable mousewheel?
https://jsfiddle.net/7b0rzaL4/10/

There's a simpler way - just use onwheel. Try scrolling in the snippet below - you can't unless you use the scroll bar:
window.onwheel = () => false;
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia est quam, in varius ipsum vulputate vitae. Nunc porttitor vulputate augue, a feugiat lorem rutrum a. Sed ac mi ultrices, tristique felis sit amet, lacinia libero. Pellentesque viverra
quis purus eget facilisis. Donec sit amet eros pellentesque orci pulvinar egestas et quis mauris. Nam suscipit nec orci congue ultricies. Cras eleifend sem enim, a pellentesque leo tempor vel. Suspendisse potenti. Vestibulum non auctor felis, eu aliquet
sem. Nullam ut urna sed lectus malesuada accumsan. Aliquam consectetur purus id ligula lacinia rhoncus. In a feugiat est.</p>
<p>Donec ut porttitor nunc, et tempus lectus. Mauris fringilla id nisi vitae lobortis. Morbi malesuada sem non mollis volutpat. Maecenas rutrum nulla nisl. Curabitur iaculis lacinia congue. Cras tortor neque, ultrices vel finibus sit amet, porttitor in metus.
Integer eget fringilla massa. Donec dignissim nunc a sagittis vestibulum. Mauris eget nibh ut neque feugiat suscipit a nec orci.</p>
<p>Nam aliquam malesuada metus, in viverra dolor pellentesque a. Maecenas blandit rutrum diam non lacinia. Etiam magna justo, laoreet pulvinar odio eget, tristique elementum lorem. Pellentesque aliquam lacinia velit, vitae sollicitudin massa rutrum sed.
Ut a sagittis leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent iaculis, nisl non cursus consequat, lectus quam bibendum mi, in finibus sapien magna vel nibh. Vivamus rhoncus nisi non ex fringilla,
eget tincidunt arcu condimentum. Aenean lobortis orci venenatis risus semper, sed malesuada ex maximus. Sed non placerat quam. Donec pulvinar neque et enim blandit, nec dignissim felis ultricies. Nulla a lacus scelerisque leo aliquet malesuada.</p>
<p>Aliquam odio erat, facilisis pharetra diam ac, tincidunt volutpat orci. Nam a nibh dapibus, dignissim mi non, bibendum libero. Duis sit amet iaculis lorem. Aenean fringilla, massa id tempor blandit, nunc diam efficitur ligula, sed luctus ligula purus
sed erat. Etiam lacinia, velit ut tempor condimentum, sapien mi molestie risus, ornare cursus ex lorem sit amet purus. Vestibulum nibh mauris, elementum pretium vehicula quis, volutpat porttitor leo. In imperdiet, ligula id tempus euismod, nunc lectus
bibendum purus, eget facilisis tellus nisi sit amet dui. Donec at pretium risus, sed maximus turpis. Morbi rhoncus urna erat, in sagittis velit condimentum in. Pellentesque vel facilisis lectus. Phasellus quis molestie ligula, in sodales lacus.</p>
<p>Sed scelerisque eros at metus molestie, quis molestie ex placerat. Quisque vitae feugiat lectus, sed volutpat risus. Nulla facilisi. Nunc finibus vel mi elementum aliquet. Duis vehicula lectus dui, ut rutrum lectus porttitor vulputate. Sed quis dapibus
turpis. Maecenas volutpat lorem ut velit tempor sagittis.</p>
<p>Aenean ultricies sapien at elit tempor ornare. Sed felis mauris, dictum eget sollicitudin vel, cursus quis sem. Quisque pharetra aliquet ligula, vitae ornare lectus rhoncus in. Duis et sapien consectetur, eleifend sem volutpat, vestibulum dolor. Sed feugiat
maximus augue, eget scelerisque nisi posuere eget. Donec egestas, dui non pellentesque bibendum, augue quam consequat augue, vel malesuada turpis lectus in nunc. Curabitur non lacinia dui.</p>
<p>In hac habitasse platea dictumst. In venenatis ipsum at nunc blandit sagittis. Vestibulum consectetur eu ipsum at semper. Nulla a eros elit. Phasellus ut elit quis leo mollis feugiat eget id mi. Fusce dignissim ultrices nibh, sit amet euismod odio vulputate
eget. Morbi velit ante, interdum a ante id, facilisis bibendum elit. Fusce ac massa bibendum, suscipit quam quis, vestibulum ante. Nunc sit amet magna vel dui commodo pellentesque vel vitae lacus.</p>
<p>Nam lobortis diam eget magna aliquet pretium. Donec tincidunt tristique erat a tincidunt. Nam ac lectus et dolor rutrum consequat. Integer sed nunc suscipit erat venenatis malesuada et gravida turpis. Phasellus nec felis quis lectus sollicitudin finibus.
Aliquam bibendum eu nibh ut tincidunt. In pharetra nisl quis metus aliquet lobortis. Donec consequat elit sit amet velit rutrum tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc tincidunt justo nec
metus aliquet, in pretium magna venenatis. Mauris id tellus pharetra felis dapibus dictum a in elit. In eu viverra purus, id bibendum dolor. Nunc eleifend metus eu tortor accumsan, at ullamcorper leo tincidunt. Suspendisse sit amet posuere magna. Sed
vitae ullamcorper libero, eu volutpat orci. Sed viverra placerat nunc, sit amet efficitur dolor aliquet ac.</p>
<p>Nulla facilisis non eros vel aliquet. Morbi finibus libero tincidunt nisl porta feugiat. In ut suscipit orci. Nunc vulputate, diam nec blandit lobortis, tortor diam facilisis turpis, non volutpat sapien massa nec augue. Phasellus et dolor in elit cursus
consequat. Etiam auctor, eros at blandit consequat, nisi neque ultricies justo, id rutrum urna lacus at velit. Aliquam hendrerit maximus ligula sed laoreet. Donec ultrices dignissim lectus, quis rhoncus massa viverra ut.</p>
<p>Fusce tristique sapien vitae nibh sodales hendrerit. Proin tincidunt iaculis ante ac dignissim. Vestibulum a finibus dui. Pellentesque at eleifend lorem. Fusce in magna imperdiet, dignissim enim sit amet, auctor nisl. Aliquam pharetra orci non vulputate
convallis. Donec a ante semper, dapibus lectus a, pulvinar lorem. Morbi ut bibendum ligula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia est quam, in varius ipsum vulputate vitae. Nunc porttitor vulputate augue, a feugiat lorem rutrum a. Sed ac mi ultrices, tristique felis sit amet, lacinia libero. Pellentesque viverra
quis purus eget facilisis. Donec sit amet eros pellentesque orci pulvinar egestas et quis mauris. Nam suscipit nec orci congue ultricies. Cras eleifend sem enim, a pellentesque leo tempor vel. Suspendisse potenti. Vestibulum non auctor felis, eu aliquet
sem. Nullam ut urna sed lectus malesuada accumsan. Aliquam consectetur purus id ligula lacinia rhoncus. In a feugiat est.</p>
<p>Donec ut porttitor nunc, et tempus lectus. Mauris fringilla id nisi vitae lobortis. Morbi malesuada sem non mollis volutpat. Maecenas rutrum nulla nisl. Curabitur iaculis lacinia congue. Cras tortor neque, ultrices vel finibus sit amet, porttitor in metus.
Integer eget fringilla massa. Donec dignissim nunc a sagittis vestibulum. Mauris eget nibh ut neque feugiat suscipit a nec orci.</p>
<p>Nam aliquam malesuada metus, in viverra dolor pellentesque a. Maecenas blandit rutrum diam non lacinia. Etiam magna justo, laoreet pulvinar odio eget, tristique elementum lorem. Pellentesque aliquam lacinia velit, vitae sollicitudin massa rutrum sed.
Ut a sagittis leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent iaculis, nisl non cursus consequat, lectus quam bibendum mi, in finibus sapien magna vel nibh. Vivamus rhoncus nisi non ex fringilla,
eget tincidunt arcu condimentum. Aenean lobortis orci venenatis risus semper, sed malesuada ex maximus. Sed non placerat quam. Donec pulvinar neque et enim blandit, nec dignissim felis ultricies. Nulla a lacus scelerisque leo aliquet malesuada.</p>
<p>Aliquam odio erat, facilisis pharetra diam ac, tincidunt volutpat orci. Nam a nibh dapibus, dignissim mi non, bibendum libero. Duis sit amet iaculis lorem. Aenean fringilla, massa id tempor blandit, nunc diam efficitur ligula, sed luctus ligula purus
sed erat. Etiam lacinia, velit ut tempor condimentum, sapien mi molestie risus, ornare cursus ex lorem sit amet purus. Vestibulum nibh mauris, elementum pretium vehicula quis, volutpat porttitor leo. In imperdiet, ligula id tempus euismod, nunc lectus
bibendum purus, eget facilisis tellus nisi sit amet dui. Donec at pretium risus, sed maximus turpis. Morbi rhoncus urna erat, in sagittis velit condimentum in. Pellentesque vel facilisis lectus. Phasellus quis molestie ligula, in sodales lacus.</p>
<p>Sed scelerisque eros at metus molestie, quis molestie ex placerat. Quisque vitae feugiat lectus, sed volutpat risus. Nulla facilisi. Nunc finibus vel mi elementum aliquet. Duis vehicula lectus dui, ut rutrum lectus porttitor vulputate. Sed quis dapibus
turpis. Maecenas volutpat lorem ut velit tempor sagittis.</p>
<p>Aenean ultricies sapien at elit tempor ornare. Sed felis mauris, dictum eget sollicitudin vel, cursus quis sem. Quisque pharetra aliquet ligula, vitae ornare lectus rhoncus in. Duis et sapien consectetur, eleifend sem volutpat, vestibulum dolor. Sed feugiat
maximus augue, eget scelerisque nisi posuere eget. Donec egestas, dui non pellentesque bibendum, augue quam consequat augue, vel malesuada turpis lectus in nunc. Curabitur non lacinia dui.</p>
<p>In hac habitasse platea dictumst. In venenatis ipsum at nunc blandit sagittis. Vestibulum consectetur eu ipsum at semper. Nulla a eros elit. Phasellus ut elit quis leo mollis feugiat eget id mi. Fusce dignissim ultrices nibh, sit amet euismod odio vulputate
eget. Morbi velit ante, interdum a ante id, facilisis bibendum elit. Fusce ac massa bibendum, suscipit quam quis, vestibulum ante. Nunc sit amet magna vel dui commodo pellentesque vel vitae lacus.</p>
<p>Nam lobortis diam eget magna aliquet pretium. Donec tincidunt tristique erat a tincidunt. Nam ac lectus et dolor rutrum consequat. Integer sed nunc suscipit erat venenatis malesuada et gravida turpis. Phasellus nec felis quis lectus sollicitudin finibus.
Aliquam bibendum eu nibh ut tincidunt. In pharetra nisl quis metus aliquet lobortis. Donec consequat elit sit amet velit rutrum tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc tincidunt justo nec
metus aliquet, in pretium magna venenatis. Mauris id tellus pharetra felis dapibus dictum a in elit. In eu viverra purus, id bibendum dolor. Nunc eleifend metus eu tortor accumsan, at ullamcorper leo tincidunt. Suspendisse sit amet posuere magna. Sed
vitae ullamcorper libero, eu volutpat orci. Sed viverra placerat nunc, sit amet efficitur dolor aliquet ac.</p>
<p>Nulla facilisis non eros vel aliquet. Morbi finibus libero tincidunt nisl porta feugiat. In ut suscipit orci. Nunc vulputate, diam nec blandit lobortis, tortor diam facilisis turpis, non volutpat sapien massa nec augue. Phasellus et dolor in elit cursus
consequat. Etiam auctor, eros at blandit consequat, nisi neque ultricies justo, id rutrum urna lacus at velit. Aliquam hendrerit maximus ligula sed laoreet. Donec ultrices dignissim lectus, quis rhoncus massa viverra ut.</p>
<p>Fusce tristique sapien vitae nibh sodales hendrerit. Proin tincidunt iaculis ante ac dignissim. Vestibulum a finibus dui. Pellentesque at eleifend lorem. Fusce in magna imperdiet, dignissim enim sit amet, auctor nisl. Aliquam pharetra orci non vulputate
convallis. Donec a ante semper, dapibus lectus a, pulvinar lorem. Morbi ut bibendum ligula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia est quam, in varius ipsum vulputate vitae. Nunc porttitor vulputate augue, a feugiat lorem rutrum a. Sed ac mi ultrices, tristique felis sit amet, lacinia libero. Pellentesque viverra
quis purus eget facilisis. Donec sit amet eros pellentesque orci pulvinar egestas et quis mauris. Nam suscipit nec orci congue ultricies. Cras eleifend sem enim, a pellentesque leo tempor vel. Suspendisse potenti. Vestibulum non auctor felis, eu aliquet
sem. Nullam ut urna sed lectus malesuada accumsan. Aliquam consectetur purus id ligula lacinia rhoncus. In a feugiat est.</p>
<p>Donec ut porttitor nunc, et tempus lectus. Mauris fringilla id nisi vitae lobortis. Morbi malesuada sem non mollis volutpat. Maecenas rutrum nulla nisl. Curabitur iaculis lacinia congue. Cras tortor neque, ultrices vel finibus sit amet, porttitor in metus.
Integer eget fringilla massa. Donec dignissim nunc a sagittis vestibulum. Mauris eget nibh ut neque feugiat suscipit a nec orci.</p>
<p>Nam aliquam malesuada metus, in viverra dolor pellentesque a. Maecenas blandit rutrum diam non lacinia. Etiam magna justo, laoreet pulvinar odio eget, tristique elementum lorem. Pellentesque aliquam lacinia velit, vitae sollicitudin massa rutrum sed.
Ut a sagittis leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent iaculis, nisl non cursus consequat, lectus quam bibendum mi, in finibus sapien magna vel nibh. Vivamus rhoncus nisi non ex fringilla,
eget tincidunt arcu condimentum. Aenean lobortis orci venenatis risus semper, sed malesuada ex maximus. Sed non placerat quam. Donec pulvinar neque et enim blandit, nec dignissim felis ultricies. Nulla a lacus scelerisque leo aliquet malesuada.</p>
<p>Aliquam odio erat, facilisis pharetra diam ac, tincidunt volutpat orci. Nam a nibh dapibus, dignissim mi non, bibendum libero. Duis sit amet iaculis lorem. Aenean fringilla, massa id tempor blandit, nunc diam efficitur ligula, sed luctus ligula purus
sed erat. Etiam lacinia, velit ut tempor condimentum, sapien mi molestie risus, ornare cursus ex lorem sit amet purus. Vestibulum nibh mauris, elementum pretium vehicula quis, volutpat porttitor leo. In imperdiet, ligula id tempus euismod, nunc lectus
bibendum purus, eget facilisis tellus nisi sit amet dui. Donec at pretium risus, sed maximus turpis. Morbi rhoncus urna erat, in sagittis velit condimentum in. Pellentesque vel facilisis lectus. Phasellus quis molestie ligula, in sodales lacus.</p>
<p>Sed scelerisque eros at metus molestie, quis molestie ex placerat. Quisque vitae feugiat lectus, sed volutpat risus. Nulla facilisi. Nunc finibus vel mi elementum aliquet. Duis vehicula lectus dui, ut rutrum lectus porttitor vulputate. Sed quis dapibus
turpis. Maecenas volutpat lorem ut velit tempor sagittis.</p>
<p>Aenean ultricies sapien at elit tempor ornare. Sed felis mauris, dictum eget sollicitudin vel, cursus quis sem. Quisque pharetra aliquet ligula, vitae ornare lectus rhoncus in. Duis et sapien consectetur, eleifend sem volutpat, vestibulum dolor. Sed feugiat
maximus augue, eget scelerisque nisi posuere eget. Donec egestas, dui non pellentesque bibendum, augue quam consequat augue, vel malesuada turpis lectus in nunc. Curabitur non lacinia dui.</p>
<p>In hac habitasse platea dictumst. In venenatis ipsum at nunc blandit sagittis. Vestibulum consectetur eu ipsum at semper. Nulla a eros elit. Phasellus ut elit quis leo mollis feugiat eget id mi. Fusce dignissim ultrices nibh, sit amet euismod odio vulputate
eget. Morbi velit ante, interdum a ante id, facilisis bibendum elit. Fusce ac massa bibendum, suscipit quam quis, vestibulum ante. Nunc sit amet magna vel dui commodo pellentesque vel vitae lacus.</p>
<p>Nam lobortis diam eget magna aliquet pretium. Donec tincidunt tristique erat a tincidunt. Nam ac lectus et dolor rutrum consequat. Integer sed nunc suscipit erat venenatis malesuada et gravida turpis. Phasellus nec felis quis lectus sollicitudin finibus.
Aliquam bibendum eu nibh ut tincidunt. In pharetra nisl quis metus aliquet lobortis. Donec consequat elit sit amet velit rutrum tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc tincidunt justo nec
metus aliquet, in pretium magna venenatis. Mauris id tellus pharetra felis dapibus dictum a in elit. In eu viverra purus, id bibendum dolor. Nunc eleifend metus eu tortor accumsan, at ullamcorper leo tincidunt. Suspendisse sit amet posuere magna. Sed
vitae ullamcorper libero, eu volutpat orci. Sed viverra placerat nunc, sit amet efficitur dolor aliquet ac.</p>
<p>Nulla facilisis non eros vel aliquet. Morbi finibus libero tincidunt nisl porta feugiat. In ut suscipit orci. Nunc vulputate, diam nec blandit lobortis, tortor diam facilisis turpis, non volutpat sapien massa nec augue. Phasellus et dolor in elit cursus
consequat. Etiam auctor, eros at blandit consequat, nisi neque ultricies justo, id rutrum urna lacus at velit. Aliquam hendrerit maximus ligula sed laoreet. Donec ultrices dignissim lectus, quis rhoncus massa viverra ut.</p>
<p>Fusce tristique sapien vitae nibh sodales hendrerit. Proin tincidunt iaculis ante ac dignissim. Vestibulum a finibus dui. Pellentesque at eleifend lorem. Fusce in magna imperdiet, dignissim enim sit amet, auctor nisl. Aliquam pharetra orci non vulputate
convallis. Donec a ante semper, dapibus lectus a, pulvinar lorem. Morbi ut bibendum ligula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia est quam, in varius ipsum vulputate vitae. Nunc porttitor vulputate augue, a feugiat lorem rutrum a. Sed ac mi ultrices, tristique felis sit amet, lacinia libero. Pellentesque viverra
quis purus eget facilisis. Donec sit amet eros pellentesque orci pulvinar egestas et quis mauris. Nam suscipit nec orci congue ultricies. Cras eleifend sem enim, a pellentesque leo tempor vel. Suspendisse potenti. Vestibulum non auctor felis, eu aliquet
sem. Nullam ut urna sed lectus malesuada accumsan. Aliquam consectetur purus id ligula lacinia rhoncus. In a feugiat est.</p>
<p>Donec ut porttitor nunc, et tempus lectus. Mauris fringilla id nisi vitae lobortis. Morbi malesuada sem non mollis volutpat. Maecenas rutrum nulla nisl. Curabitur iaculis lacinia congue. Cras tortor neque, ultrices vel finibus sit amet, porttitor in metus.
Integer eget fringilla massa. Donec dignissim nunc a sagittis vestibulum. Mauris eget nibh ut neque feugiat suscipit a nec orci.</p>
<p>Nam aliquam malesuada metus, in viverra dolor pellentesque a. Maecenas blandit rutrum diam non lacinia. Etiam magna justo, laoreet pulvinar odio eget, tristique elementum lorem. Pellentesque aliquam lacinia velit, vitae sollicitudin massa rutrum sed.
Ut a sagittis leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent iaculis, nisl non cursus consequat, lectus quam bibendum mi, in finibus sapien magna vel nibh. Vivamus rhoncus nisi non ex fringilla,
eget tincidunt arcu condimentum. Aenean lobortis orci venenatis risus semper, sed malesuada ex maximus. Sed non placerat quam. Donec pulvinar neque et enim blandit, nec dignissim felis ultricies. Nulla a lacus scelerisque leo aliquet malesuada.</p>
<p>Aliquam odio erat, facilisis pharetra diam ac, tincidunt volutpat orci. Nam a nibh dapibus, dignissim mi non, bibendum libero. Duis sit amet iaculis lorem. Aenean fringilla, massa id tempor blandit, nunc diam efficitur ligula, sed luctus ligula purus
sed erat. Etiam lacinia, velit ut tempor condimentum, sapien mi molestie risus, ornare cursus ex lorem sit amet purus. Vestibulum nibh mauris, elementum pretium vehicula quis, volutpat porttitor leo. In imperdiet, ligula id tempus euismod, nunc lectus
bibendum purus, eget facilisis tellus nisi sit amet dui. Donec at pretium risus, sed maximus turpis. Morbi rhoncus urna erat, in sagittis velit condimentum in. Pellentesque vel facilisis lectus. Phasellus quis molestie ligula, in sodales lacus.</p>
<p>Sed scelerisque eros at metus molestie, quis molestie ex placerat. Quisque vitae feugiat lectus, sed volutpat risus. Nulla facilisi. Nunc finibus vel mi elementum aliquet. Duis vehicula lectus dui, ut rutrum lectus porttitor vulputate. Sed quis dapibus
turpis. Maecenas volutpat lorem ut velit tempor sagittis.</p>
<p>Aenean ultricies sapien at elit tempor ornare. Sed felis mauris, dictum eget sollicitudin vel, cursus quis sem. Quisque pharetra aliquet ligula, vitae ornare lectus rhoncus in. Duis et sapien consectetur, eleifend sem volutpat, vestibulum dolor. Sed feugiat
maximus augue, eget scelerisque nisi posuere eget. Donec egestas, dui non pellentesque bibendum, augue quam consequat augue, vel malesuada turpis lectus in nunc. Curabitur non lacinia dui.</p>
<p>In hac habitasse platea dictumst. In venenatis ipsum at nunc blandit sagittis. Vestibulum consectetur eu ipsum at semper. Nulla a eros elit. Phasellus ut elit quis leo mollis feugiat eget id mi. Fusce dignissim ultrices nibh, sit amet euismod odio vulputate
eget. Morbi velit ante, interdum a ante id, facilisis bibendum elit. Fusce ac massa bibendum, suscipit quam quis, vestibulum ante. Nunc sit amet magna vel dui commodo pellentesque vel vitae lacus.</p>
<p>Nam lobortis diam eget magna aliquet pretium. Donec tincidunt tristique erat a tincidunt. Nam ac lectus et dolor rutrum consequat. Integer sed nunc suscipit erat venenatis malesuada et gravida turpis. Phasellus nec felis quis lectus sollicitudin finibus.
Aliquam bibendum eu nibh ut tincidunt. In pharetra nisl quis metus aliquet lobortis. Donec consequat elit sit amet velit rutrum tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc tincidunt justo nec
metus aliquet, in pretium magna venenatis. Mauris id tellus pharetra felis dapibus dictum a in elit. In eu viverra purus, id bibendum dolor. Nunc eleifend metus eu tortor accumsan, at ullamcorper leo tincidunt. Suspendisse sit amet posuere magna. Sed
vitae ullamcorper libero, eu volutpat orci. Sed viverra placerat nunc, sit amet efficitur dolor aliquet ac.</p>
<p>Nulla facilisis non eros vel aliquet. Morbi finibus libero tincidunt nisl porta feugiat. In ut suscipit orci. Nunc vulputate, diam nec blandit lobortis, tortor diam facilisis turpis, non volutpat sapien massa nec augue. Phasellus et dolor in elit cursus
consequat. Etiam auctor, eros at blandit consequat, nisi neque ultricies justo, id rutrum urna lacus at velit. Aliquam hendrerit maximus ligula sed laoreet. Donec ultrices dignissim lectus, quis rhoncus massa viverra ut.</p>
<p>Fusce tristique sapien vitae nibh sodales hendrerit. Proin tincidunt iaculis ante ac dignissim. Vestibulum a finibus dui. Pellentesque at eleifend lorem. Fusce in magna imperdiet, dignissim enim sit amet, auctor nisl. Aliquam pharetra orci non vulputate
convallis. Donec a ante semper, dapibus lectus a, pulvinar lorem. Morbi ut bibendum ligula.</p>

You can check this
$(window).on("mousewheel", function(e){
if(e.originalEvent.deltaY > 0) {
e.preventDefault();
return;
} else if (e.originalEvent.wheelDeltaY < 0) {
e.preventDefault();
return;
}
});

Pan and zoomable view container in html

I want to have a <div> as a pan-zoomable view that has some other HTML elements like images, other divs and etc in it. I saw many examples and implements on the internet, but those are using canvas or SVG.
In my case, I don't wanna use canvas to add HTML elements in it, cause the inner elements have some js behaviors that I can't implement them on canvas.
Note that I don't wanna make my inner elements draggable, zoomable or something like that, I just want my entire view to be pan-zoomable. Imagine a 500*500 <div> that shows a 1500*1000 <div> with some elements in it. Something like google map that has HTML elements inside.

Use rem units for all element's dimensions in your zoomable view. rem is root em, i.e. font-size of html tag (i.e. root). And then change font-size of html tag to zoom.
But don't use this units for the other blocks you don't want to zoom.
Demo:
html {
font-size: 10px;
}
.resizable {
/* 30 * 10px = 300px */
width: 30rem;
/* 12 * 10px = 120px */
height: 12rem;
/* 0.25 * 10px = 4px */
border: 0.25rem solid orange;
font-size: 1.5rem;
}
img {
display: block;
/* 15 * 10px = 150px */
width: 15rem;
/* 8 * 10px = 80px */
height: 8rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="$(`html`).css('font-size', parseInt($(`html`).css('font-size')) - 1)">
-
</button>
<button onclick="$(`html`).css('font-size', parseInt($(`html`).css('font-size')) + 1)">
+
</button>
<div class="resizable">
This is resizable text and resizable image
<img src="https://i.stack.imgur.com/uubYJ.jpg" />
</div>
Also you can consider using em units if you can cope with calculating proper sizing or you don't have to set different font-size values in element hierarchy.

You can apply transform: scale with some zoom value for this view to zoom. If you want to display 1500x1000 view in 500x500 zoomable view you should use transform: scale(0.33, 0.5). Demo:
.zoomable {
width: 500px;
height: 500px;
}
.zoomed {
width: 1500px;
height: 1000px;
overflow: hidden;
transform: scale(0.33, 0.5);
/* to move transformed elements to top left corner */
transform-origin: 0 0;
}
<div class="zoomable">
<div class="zoomed">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius dignissim urna, finibus vulputate mi egestas eu. Etiam non eros lacinia, molestie diam in, facilisis purus. Morbi sed risus sodales, elementum neque quis, volutpat lectus. Nullam
neque mauris, iaculis quis felis sed, luctus tempus nunc. Maecenas est nulla, tempor sed dictum at, faucibus a sapien. Pellentesque vitae libero urna. Ut porta placerat malesuada. Sed aliquam et risus a laoreet. Nunc vel lacus vel lectus placerat
pellentesque. Mauris lobortis ante vel mauris tincidunt, ut accumsan magna cursus. Phasellus ante dolor, mollis id congue ut, rhoncus porta augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque placerat nibh eget feugiat tempor.
Nam pellentesque ullamcorper elit eu sodales. Aliquam at mi vel metus condimentum condimentum sed eu tortor. In hac habitasse platea dictumst. Donec consequat sapien non dui finibus, sit amet laoreet arcu vehicula. Sed a dui et massa commodo commodo
ut nec augue. Sed suscipit nibh nec nisl facilisis, nec finibus diam ullamcorper. Mauris bibendum commodo turpis eu fermentum. Sed porta, lectus sit amet pulvinar auctor, ante urna dignissim mauris, hendrerit suscipit magna dui in urna. Quisque convallis
tellus et semper iaculis. Mauris fringilla velit in magna tempor bibendum. Aenean ultricies at justo vitae congue. Pellentesque a purus sed justo semper bibendum. Nunc ut tortor quis eros laoreet gravida maximus sit amet lacus. Mauris vel consequat
ipsum, in vehicula eros. Duis enim dolor, convallis sed nunc nec, scelerisque tempus ligula. Nullam consequat velit sit amet risus congue, nec condimentum lacus bibendum. Aliquam ornare justo nec nunc eleifend, tristique condimentum nulla vulputate.
Donec id orci turpis. Donec porta rutrum massa ac aliquam. In eu ante sed odio dapibus congue. Aliquam tempus nisi nec porta tempus. Aliquam quam augue, commodo at tortor vitae, condimentum eleifend massa. Ut sollicitudin, nunc eget pretium ullamcorper,
nibh tellus imperdiet enim, at tincidunt nisi metus vel diam. Morbi volutpat velit magna, eu facilisis est luctus volutpat. Maecenas volutpat metus quis elit tristique, non sollicitudin tortor iaculis. Mauris a purus leo. Pellentesque eu mauris sit
amet est mollis cursus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam pellentesque cursus mattis. Suspendisse varius elit vitae scelerisque consectetur. Quisque finibus quam quis lacus dignissim, vestibulum
aliquam erat pulvinar. Ut risus nisi, ultrices eu purus eget, scelerisque tempor ex. Nam pretium placerat orci ut pharetra. Pellentesque sit amet tincidunt orci. Maecenas laoreet porttitor volutpat. Cras vitae mauris mauris. Sed a lacus id felis efficitur
pellentesque. Nulla facilisi. Integer urna nibh, feugiat commodo lectus at, commodo vehicula arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla mauris lectus, ultricies et elit vel, feugiat ultrices
sem. Nunc imperdiet sed erat et imperdiet. Donec non tincidunt nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ultricies, massa sit amet congue rhoncus, augue nibh imperdiet eros, vitae ornare risus
ante id magna. Suspendisse ac leo nulla. Praesent eu ex rhoncus, scelerisque sem sed, porta leo. Sed faucibus, velit placerat lacinia iaculis, turpis libero convallis lacus, eu mattis ante lectus non urna. Fusce semper sodales urna non sodales. Nunc
ex sapien, ultrices eget dolor sit amet, vestibulum aliquet mi. Aliquam bibendum mollis odio. Phasellus porta commodo est nec placerat. Sed faucibus sapien id enim dignissim, non ullamcorper eros cursus. Integer auctor eu quam ac mollis. Suspendisse
et nisl lectus. Phasellus purus erat, aliquet et neque in, aliquet posuere sapien. Phasellus eget purus iaculis tortor porta maximus ut non est. Cras ac euismod elit. Vivamus interdum odio sit amet gravida sollicitudin. Cras sed elit vel magna rhoncus
consectetur ut a ante. Nullam pulvinar convallis nisi quis maximus. Sed ullamcorper neque at luctus efficitur. Donec ligula ex, auctor id magna sed, tempor maximus sapien. Etiam rhoncus, felis sed fringilla pellentesque, justo sapien hendrerit odio,
eget tincidunt urna magna ac orci. Nam pharetra vitae eros non bibendum. Nulla sit amet ligula quis massa aliquet auctor. Praesent id eros non odio ultricies venenatis a ac metus. Sed ante justo, gravida id ipsum tempor, dignissim dapibus ligula.
Nulla vulputate cursus fringilla. Ut ultricies ornare quam. Vivamus ac malesuada felis, ac laoreet velit. Curabitur ut nisl pulvinar orci placerat sagittis convallis id elit. Mauris vitae lacus quis metus porta viverra. Nam porttitor neque ipsum,
et tincidunt nisi interdum a. Suspendisse potenti. Donec lacinia convallis maximus. Suspendisse bibendum nisl ex, nec eleifend magna ornare in. Praesent diam orci, iaculis quis nunc sit amet, mattis rutrum lorem. Maecenas bibendum vel eros non imperdiet.
Etiam accumsan sem sit amet orci porta, auctor ultricies elit posuere. Curabitur leo mauris, tempus et elementum non, malesuada et velit. Phasellus in tellus vitae diam placerat condimentum vitae quis neque. Maecenas nec eros eget tellus sollicitudin
fermentum a nec magna. Phasellus sagittis nunc a convallis suscipit. Quisque cursus, dui vitae sollicitudin pulvinar, sem velit rutrum enim, nec dictum lectus dolor nec augue. Nam volutpat metus et semper ultrices. Sed faucibus purus turpis, vel placerat
arcu posuere in. Mauris a scelerisque ex. Quisque eget pellentesque est. Cras vitae eros sit amet urna interdum ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam porttitor nibh vitae metus
varius lobortis. Phasellus vitae vehicula justo. Sed blandit, mi ac scelerisque hendrerit, massa eros ullamcorper orci, ac finibus magna felis nec neque. Proin sollicitudin tristique ante blandit tempus. Proin eget placerat eros. Donec dignissim,
ligula id hendrerit aliquam, turpis neque pellentesque ligula, nec volutpat dui nisi ac sapien. Nulla rhoncus neque quis sollicitudin venenatis. Nullam sed dapibus nunc. Suspendisse porta cursus scelerisque. In maximus nisl vitae fermentum molestie.
Cras a diam quis sem scelerisque molestie. Maecenas iaculis aliquam nibh, auctor imperdiet metus fermentum in. Pellentesque ac dui ornare, blandit ipsum nec, placerat ante. Morbi gravida varius ex. Proin efficitur molestie placerat. Nunc suscipit
arcu eu dui ultricies accumsan. Aliquam quis ex in neque hendrerit porttitor. Donec luctus lorem lorem, quis tempor dolor gravida vel. Nulla eget nisi metus. Curabitur maximus ante arcu, id ultrices arcu pharetra nec. Donec erat arcu, vulputate a
felis in, aliquet venenatis augue. Nulla sollicitudin in ligula vel ornare. Duis tempor mi et turpis viverra faucibus nec in ante. Cras laoreet mauris at nunc vehicula, eu accumsan ligula eleifend. Mauris vestibulum cursus nunc nec ornare. Morbi nec
eros orci. Curabitur et dolor gravida elit volutpat pharetra. Nulla dapibus ultrices quam, ut scelerisque odio euismod et. Aliquam consequat nisi at mauris aliquet vehicula. Proin lorem leo, consectetur scelerisque tempus et, sollicitudin nec ipsum.
Nullam laoreet lectus vitae justo blandit porttitor. Sed et tristique enim. Phasellus nisi mauris, rutrum nec erat nec, scelerisque finibus erat. Sed euismod, diam sed scelerisque aliquet, lectus ante congue dolor, nec commodo nisi massa et turpis.
Ut vestibulum, mi a faucibus venenatis, mi justo mollis sapien, non feugiat tellus sem id justo. Vivamus consectetur lorem et volutpat volutpat. In dapibus tempor metus id euismod. Nunc eu ligula hendrerit, convallis risus a, varius orci. Mauris sed
vehicula velit, in rutrum tellus. Etiam venenatis aliquet vulputate. Nunc suscipit viverra consequat. Pellentesque venenatis finibus velit, nec ultricies lorem aliquam vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse
platea dictumst. Nam dictum interdum mattis. Nunc cursus erat ut nisl sollicitudin, a malesuada ipsum rutrum. Maecenas vulputate ligula et ligula tempor accumsan. Nam dictum mi ligula, vel commodo elit rutrum nec. Donec feugiat imperdiet sem sed posuere.
Nunc convallis egestas lorem vel auctor. Donec et magna at augue rutrum efficitur et non est. In a placerat mi. Nunc in molestie mauris. Quisque efficitur orci a lorem finibus porta. Proin semper nec quam ac posuere. Sed egestas nisl ac nibh egestas,
ac efficitur mauris sagittis. Nam id tincidunt tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam eget libero porta libero venenatis pharetra sit amet at leo. Ut efficitur, elit et elementum iaculis, mauris ligula sollicitudin
tellus, in feugiat elit urna in quam. Sed vitae nisi eu nisi congue vehicula. Duis eget tincidunt lorem. Ut sem augue, fringilla quis eros ut, tempor vulputate arcu. Aenean facilisis consequat lectus in tempor. Suspendisse aliquet sagittis mauris
id efficitur. Nam aliquam purus id lectus viverra luctus. Ut sagittis, leo cursus consequat fringilla, sem nisl interdum ipsum, ut imperdiet sapien ligula eget nisi. Aliquam eget suscipit nisi. Nunc vel lorem sed augue convallis rutrum ac quis arcu.
Nullam eu mi rhoncus, pretium leo at, luctus turpis. Etiam eget dolor et risus placerat facilisis nec quis tellus. Fusce vestibulum a felis at facilisis. Nulla sit amet est tortor. Suspendisse potenti. Donec aliquam magna vel tincidunt tempus. Quisque
et nunc massa. Aliquam ultrices, metus eget pretium varius, massa ex vulputate dui, at ornare massa tortor eu urna. Vestibulum semper mi a consequat porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc
pharetra varius mauris. In efficitur, lorem a commodo pharetra, risus lectus pulvinar felis, at pharetra turpis ligula quis sem. Phasellus bibendum, ex sit amet convallis gravida, sapien sapien iaculis dolor, nec iaculis mi elit ut justo. Integer
est sem, finibus vel ultrices id, ultrices eget leo. Cras luctus sapien sit amet mollis sollicitudin. Nam a turpis ac nisl blandit maximus. Etiam venenatis gravida mi, a fermentum elit congue eget. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Proin ullamcorper ex eget turpis ornare porttitor. Proin ullamcorper egestas nunc eget viverra. Proin ornare dui vel egestas vehicula. Aenean sem metus, convallis eget felis vel, rhoncus laoreet elit. Cras ut orci a nisi suscipit consectetur.
Quisque laoreet, mi ac egestas imperdiet, arcu lectus tempus dui, non semper tellus orci eu massa. Etiam quis enim nec purus tempor dapibus. Integer laoreet dui nec vulputate commodo. Praesent facilisis leo iaculis sollicitudin commodo. In non nibh
nec quam sollicitudin facilisis. Morbi ut elementum dui. Ut imperdiet semper dui eget hendrerit. Proin hendrerit egestas faucibus. Maecenas faucibus velit vel mauris volutpat, non vehicula dolor suscipit. Integer magna odio, feugiat nec libero eget,
porta ultrices magna. Sed in tristique turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque ac tortor tellus. Nam placerat nulla non odio convallis ullamcorper. Fusce odio nibh, rutrum a ultricies
in, venenatis et orci. Pellentesque dictum quis lectus ac congue. Maecenas eleifend quis lorem ullamcorper elementum. Fusce velit leo, fringilla eu congue ut, blandit et est. Fusce sed lacus quis metus maximus molestie. Curabitur euismod turpis in
ante consequat aliquam a a ante. Mauris lectus nunc, laoreet id libero eu, feugiat vehicula est. Maecenas maximus, ligula ut rutrum mattis, elit nisl vulputate neque, ut condimentum augue est at libero. Orci varius natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Mauris faucibus purus eu ante aliquam finibus. Nunc nunc diam, euismod quis sem at, pulvinar porttitor lacus. Phasellus varius metus in mattis pellentesque. Nunc id quam ex.
</div>
</div>