Скрытие полосы прокрутки и создание настраиваемой полосы прокрутки

Question

Итак, я хотел создать страницу типа https://www.guillaumetomasi.com/. Как я могу скрыть полосу прокрутки и сделать такую ​​же на странице.

Answer 1

Дело в том, что они вообще не используют прокрутку, но то, что вы чувствуете, является измененной прокруткой для этих слайдов, на самом деле является слайд-шоу, созданным с помощью JavaScript функций. Эти боковые слайд-шоу сейчас в тренде и дают ощущение псевдопрокрутки. Было бы лучше, если бы вы спросили, как добиться этого слайд-шоу на веб-странице, вместо этой прокрутки ...

Answer 2

Полоса прокрутки может быть скрыта с помощью 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>

Answer 3

С помощью атрибутов CSS, таких как overflow-x: hidden и overflow-y: hidden, вы можете скрыть полосы прокрутки.

Пользовательская полоса прокрутки и процесс прокрутки контролируются Javascript через и событиями.