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

Question

所以我想制作一个像https://www.guillaumetomasi.com/这样的页面。如何隐藏滚动条并在页面中制作一个这样的自定义页面。

Answer 1

使用 CSS 属性如overflow-x: hidden和overflow-y: hidden你可以隐藏滚动条。

自定义滚动条和滚动过程由 Javascript 通过和事件控制。

Answer 2

事情很简单，他们根本不使用任何滚动，但您感觉这些幻灯片的修改滚动实际上是由 JavaScript 功能构建的幻灯片。 这些侧面幻灯片现在很流行，给你一种伪滚动的感觉。 如果您问如何在 web 页面而不是滚动页面中实现该幻灯片放映会更好...

Answer 3

滚动条可以用 css ::-webkit-scrollbar {width: 0px;}隐藏滚动条 自定义滚动条是用 javascript 制作的。 这是如何完成的示例：

 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>