隐藏滚动条并制作自定义滚动条

Question

So I wanted to make a page like https://www.guillaumetomasi.com/ .How can I hide the scrollbar and make a custom one like that in the page.

Answer 1

With CSS attributes like overflow-x: hidden and overflow-y: hidden you can hide scrollbars.

The custom scrollbar and the scrolling proccess is controlled by Javascript via and events.

Answer 2

The thing is simple and that's, they are not using any scrolling at all, but what you feel is a modified scroll for those slides is actually a slideshow built by JavaScript functionalities. These side slideshow are nowadays in trend and gives you a feel of pseudo scroll. It will be better if you would ask how to achieve that slideshow in a web page instead of that scrolling...

Answer 3

The scroll bar can be hidden with css ::-webkit-scrollbar {width: 0px;} The custom scroll bar is made with javascript. Here's an example of how it could be done:

 window.addEventListener("scroll", function() { var section1 = document.getElementById("section1"); var section2 = document.getElementById("section2"); var section3 = document.getElementById("section3"); var indicator = document.getElementById("scroll-indicator"); if (window.scrollY < section2.offsetTop ) { // If scroll height is above section 2 indicator.innerText = "1" } if (window.scrollY > (section1.offsetTop + section1.offsetHeight)) { // If scrolled past section 1 indicator.innerText = "2" } if (window.scrollY > (section2.offsetTop + section2.offsetHeight)) {// If scrolled past section 2 indicator.innerText = "3" } });

 p { position: fixed; right: 15%; top: 50%; color: black; font-size: 24px; font-family: arial; }::-webkit-scrollbar { width: 0px; /*This removes the scroll bar*/ }

 <div id="section1" style="height: 500px; background-color: lightblue">Scroll Down</div> <div id="section2" style="height: 500px; background-color: pink">Keep scrolling</div> <div id="section3" style="height: 500px; background-color: Khaki">Almost there</div> <p id="scroll-indicator">1</p>