@marki1404
Я Front-end програмист

Как при скролл менять фон скролла?

Я хочу, если я дойду до 800px, фон моего скролла менялся. Как это сделать?
  • Вопрос задан
  • 207 просмотров
Решения вопроса 1
@Mikelius
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>1</title>
  <style media="screen">
    body.a::-webkit-scrollbar {
      background: silver;
    }
    body.b::-webkit-scrollbar {
      background: red;
    }
    body::-webkit-scrollbar-thumb{
      background: black;
    }
  </style>
</head>
<body class="b">
  <div style="height: 3000px">ed</div>
  <script type="text/javascript">
    body = document.getElementsByTagName('body')[0]
    window.onscroll = () => {
      var scroll = window.pageYOffset;
      if (scroll >= 800){
        body.classList.add("b");
        body.classList.remove("a");
      } else if (scroll <= 800){
        body.classList.add("a");
        body.classList.remove("b");
      }
    }
  </script>
</body>
</html>

Кое-как работает, но только если навести после мышку на scroll-bar и не все браузеры поддерживают webkit-scrollbar caniuse . Надеюсь чемто помог.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы