I'm working on a project for a buddy and I was wondering how I might be able to achieve a vertical scrolling effect similar to the one with books on this page https://pudding.cool/2019/06/summer-reading/
The vertical scroll bar indicator I'm looking to replicate is on the right side of the page
I looked at the code and it looks like they used a specific class as multiple divs, but wasnt sure if there was a different way to achieve this
EDIT: was in a rush when I posted this, more info follows.
I reviewed W3 schools guide on how to create a scroll indicator https://www.w3schools.com/howto/howto_js_scroll_indicator.asp and was able to modify it to be fixed and vertical, now I'm looking at using this concept to mirror the target outcome indicated above. I put together a very basic fiddle of the general idea
https://jsfiddle.net/sq0z314o/
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.height = scrolled + "%";
}/* Style the header: fixed position (always stay at the top) */
.scroll {
position: fixed;
top: 0;
z-index: 1;
height: 100%;
background-color: #f1f1f1;
}
/* The progress container (grey background) */
.progress-container {
height: 100%;
width: 8px;
background: #ccc;
}
/* The progress bar (scroll indicator) */
.progress-bar {
width: 8px;
background: #4caf50;
height: 0%;
}
.content {
width: 75%;
margin: auto;
}<div class="scroll">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
<div class = "content">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius libero urna, eu aliquet tellus consequat a. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam vitae dignissim ante. Morbi maximus auctor diam porta vestibulum. Suspendisse et luctus ex, ut interdum risus. Proin mi elit, viverra quis rhoncus euismod, luctus ac lectus. Phasellus laoreet accumsan pretium. Sed aliquam vestibulum sapien, et malesuada ipsum gravida faucibus. Duis vestibulum at nibh id ullamcorper. Curabitur maximus consequat diam non lobortis. Etiam tristique neque enim.</p>
<p> Nulla sem ex, ultrices at velit id, tempor consequat neque. Nulla at molestie mi, ullamcorper interdum purus. Cras elementum, orci a sollicitudin elementum, tellus sem sodales mi, eget consectetur mi nunc non velit. Maecenas id mauris massa. Donec sed eros erat. Nam interdum sollicitudin elementum. Maecenas laoreet commodo gravida. Duis orci dolor, aliquet sed viverra ut, euismod ac sem. In hendrerit nisl quis massa tristique, vitae cursus urna consectetur.</p>
<p> Suspendisse maximus dapibus orci, sed faucibus leo iaculis sed. Sed quam ante, accumsan ac gravida ut, feugiat volutpat ligula. Sed aliquet nisi metus, a dapibus diam porttitor et. Suspendisse potenti. Mauris dapibus interdum orci at blandit. Vivamus sit amet turpis est. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p> Etiam sodales id velit nec pulvinar. Nulla facilisi. Phasellus lobortis arcu a lobortis consectetur. Proin vitae laoreet odio. Ut sem purus, finibus non ante vitae, porttitor cursus leo. In sed dui lectus. Cras in enim vel ipsum fermentum condimentum. Praesent sit amet fringilla dui. Sed hendrerit varius enim vitae pulvinar. Duis hendrerit eleifend urna, eget cursus odio vulputate eu. Etiam pretium elit quis nibh tristique semper. Praesent vitae sem sed felis aliquam bibendum sed ac justo. Ut eu venenatis neque, vel tristique lacus. Etiam condimentum sit amet est in pulvinar.</p>
<p> Sed ut pellentesque dolor. Suspendisse blandit tellus at orci pellentesque, a mattis diam dictum. Nullam condimentum et sapien sed tincidunt. Sed consequat urna nec arcu suscipit, vel dapibus elit porttitor. Suspendisse arcu est, ultrices vitae nisi nec, finibus malesuada ex. Aliquam erat volutpat. Fusce odio felis, posuere a dictum ut, dignissim dictum felis. Integer quis eros erat. Sed sed augue finibus, mattis nisl at, auctor orci. Praesent ex metus, viverra et molestie quis, suscipit eget quam. Praesent vehicula elementum tortor, sed dictum mauris. In lectus elit, gravida id iaculis nec, bibendum et ante.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius libero urna, eu aliquet tellus consequat a. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam vitae dignissim ante. Morbi maximus auctor diam porta vestibulum. Suspendisse et luctus ex, ut interdum risus. Proin mi elit, viverra quis rhoncus euismod, luctus ac lectus. Phasellus laoreet accumsan pretium. Sed aliquam vestibulum sapien, et malesuada ipsum gravida faucibus. Duis vestibulum at nibh id ullamcorper. Curabitur maximus consequat diam non lobortis. Etiam tristique neque enim.</p>
</div>