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

【问题标题】：Hiding scrollbar and making custom scrollbar隐藏滚动条并制作自定义滚动条
【发布时间】：2020-06-21 10:42:34
【问题描述】：

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

【问题讨论】：

标签： javascript html css web

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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>

【讨论】：