Вертикальная полоса прокрутки не работает Становится активным - PullRequest
Новая
       37

Вертикальная полоса прокрутки не работает Становится активным

0 голосов
/ 04 мая 2020

Вертикальная полоса прокрутки стала неактивной. Странная вещь в этом коде состоит в том, что он хорошо работает с того места, где я его скопировал, но для меня есть полоса прокрутки, но она не активна (она больше похожа на прозрачную). Я могу перемещать его с помощью клавиш со стрелками, но не с помощью мыши. Почему это так? 

<!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>

Моя активная полоса прокрутки - моя главная проблема. На самом деле я пытаюсь изменить стиль полосы прокрутки

Буду очень признателен, если вы исправите мой код. Все, что я хочу, это иметь возможность прокручивать мышью.

Я попробовал пару вещей, но это не помогло.

спасибо

Ответы [ 3 ]

0 голосов
/ 04 мая 2020

Я думаю, это потому, что overflow-y: auto; Это должно быть прокрутка или видимый

0 голосов
/ 04 мая 2020

Проблема со стрелкой связана с вашим замечательным комплектом. Вы можете посмотреть на это, в противном случае вы можете использовать Fontawesome CDN. Я добавил css для полосы прокрутки. Теперь она будет отлично работать. 

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 голосов
/ 04 мая 2020

Вместо того, чтобы пытаться исправить текущий код, попробуйте создать новую полосу прокрутки .. Ниже приведен штрих-код прокрутки ...

просто скопируйте его, настройте и наслаждайтесь 

/****************    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      ********************/
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...