La barre de défilement verticale est devenue inactive. La chose étrange à propos de ce code est qu'il fonctionne bien à partir de l'endroit où je l'ai copié, mais pour moi, la barre de défilement est là mais elle n'est pas cliquable (c'est plus comme transparent). Je peux le déplacer avec les touches fléchées mais pas avec la souris. Pourquoi cela est-il ainsi?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://kit.fontawesome.com/a54d2cbf95.js"></script>
  <link rel="stylesheet" href="style.css">
  <title>Back To Top</title>
</head>


<style>
    * {
  margin:0;
  padding:0;
}

html body {
  scroll-behavior: smooth;
  overflow-y:  auto;
}

section {
  height:75vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Raleway", sans-serif;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: 8px;
}

.section1 {
  background: #f0932b;
}

.section2 {
  background: #eb4d4b;
}

.section3 {
  background: #7ed6df;
}

.section4 {
  background: #22a6b3;
}

.to-top {
  background: white;
  position: fixed;
  bottom: 16px;
  right:32px;
  width:50px;
  height:50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:32px;
  color:#1f1f1f;
  text-decoration: none;
  opacity:0;
  pointer-events: none;
  transition: all .4s;
}

.to-top.active {
  bottom:32px;
  pointer-events: auto;
  opacity:1;
}
</style>

<body>

  <section class="section1">Section 1</section>
  <section class="section2">Section 2</section>
  <section class="section3">Section 3</section>
  <section class="section4">Section 4</section>

  <a href="#" class="to-top">
    <i class="fas fa-chevron-up"></i>
  </a>

  <script >
      const toTop = document.querySelector(".to-top");

window.addEventListener("scroll", () => {
  if (window.pageYOffset > 100) {
    toTop.classList.add("active");
  } else {
    toTop.classList.remove("active");
  }
})
  </script>
</body>

</html>

Rendre la barre de défilement active est mon principal problème. J'essaye en fait de changer le style de la barre de défilement

Je vous serai très reconnaissant si vous corrigez mon code. Tout ce que je veux, c'est pouvoir faire défiler avec ma souris.

J'ai essayé plusieurs choses mais cela n'a pas aidé.

Merci

0
shahmir 4 mai 2020 à 20:06

3 réponses

Au lieu d'essayer de fixer le code actuel, essayez de créer une nouvelle barre de défilement ... le code à barres de défilement est donné ci-dessous ...

il suffit de le copier-coller, de le personnaliser et d'en profiter

/****************    scroll bar      *******************/



  ::-webkit-scrollbar{
    width: 12px;
	background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb{
	border-radius: 10px;
	/* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); */
	background-image: -webkit-linear-gradient(160deg, rgb(68, 67, 67),rgb(129, 127, 127), rgb(68, 67, 67));
  
}


/****************    /scroll bar      ********************/
0
Shamir Khan 4 mai 2020 à 17:13

Le problème de l'icône de flèche vient de votre kit fontawesome. Vous pouvez examiner cela sinon vous pouvez utiliser fontawesome cdn. J'ai ajouté du CSS pour la barre de défilement maintenant. Cela fonctionnera parfaitement.

const toTop = document.querySelector(".to-top");

window.addEventListener("scroll", () => {
  if (window.pageYOffset > 100) {
    toTop.classList.add("active");
  } else {
    toTop.classList.remove("active");
  }
})
* {
  margin:0;
  padding:0;
}

html body {
  scroll-behavior: smooth;
  overflow-y:  auto;
}
body::-webkit-scrollbar {
    width: 1em;
}
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}

section {
  height:75vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Raleway", sans-serif;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: 8px;
}

.section1 {
  background: #f0932b;
}

.section2 {
  background: #eb4d4b;
}

.section3 {
  background: #7ed6df;
}

.section4 {
  background: #22a6b3;
}

.to-top {
  background: white;
  position: fixed;
  bottom: 16px;
  right:32px;
  width:50px;
  height:50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:32px;
  color:#1f1f1f;
  text-decoration: none;
  opacity:0;
  pointer-events: none;
  transition: all .4s;
}

.to-top.active {
  bottom:32px;
  pointer-events: auto;
  opacity:1;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  <title>Document</title>
</head>
<body>
  <section class="section1">Section 1</section>
  <section class="section2">Section 2</section>
  <section class="section3">Section 3</section>
  <section class="section4">Section 4</section>

  <a href="#" class="to-top">
    <i class="fas fa-chevron-up"></i>
  </a>
</body>
</html>
0
Kumar Gaurav 4 mai 2020 à 17:53

Je pense que c'est parce que overflow-y: auto; Il doit être scroll ou visible

0
AlneX Football 4 mai 2020 à 17:20