прокрутка начала прокрутки | скрыть прокрутку при остановке прокрутки с помощью js / jquery / CSS - PullRequest
Новая
       0

прокрутка начала прокрутки | скрыть прокрутку при остановке прокрутки с помощью js / jquery / CSS

0 голосов
/ 19 июня 2020

можно скрыть или отобразить полосу прокрутки на EventListener?

моя цель -

при прокрутке на странице полоса прокрутки должна быть включена (показать) или (overflow :auto)

при остановке прокрутки на некоторое время полоса прокрутки должна быть отключена (скрыть) (overflow :hidden)

и использовать ее снова и снова

Я пробовал использовать event listener при прокрутке без каких-либо результат! .. есть еще способ? 

var timer = null;
window.addEventListener('scroll', function() {
  if (timer !== null) {
    clearTimeout(timer);
  }
  timer = setTimeout(function() {
    console.log("hide");
    document.getElementById('myhtml').className = 'hidescroll';
  }, 1250);
}, false);
window.addEventListener('scroll', function() {
  console.log("show");

  document.getElementById('myhtml').className = 'myscroll';
}, false);
/* width */

.myscroll::-webkit-scrollbar {
  border-radius: 5px;
  width: 10px;
}


/* Track */

.myscroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}


/* Handle */

.myscroll::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}


/* Handle on hover */

.myscroll::-webkit-scrollbar-thumb:hover {
  position: relative;
  background: #555;
  border-radius: 5px;
}

.hidescroll::-webkit-scrollbar {
  overflow: hidden;
}
<html lang="en" id="myhtml" class="">

<head>
  <meta charset="utf-8" />
  <title> learning </title>
</head>

<body>
  <div class="wrapper">
    <div class="sidebar"> </div>
    <div>
      <p>The command takes options applicable</p>
      <p>The command takes options applicable</p>
      <p>The command takes options applicable</p>
      <p>The command takes options applicable</p>
      <p>The command takes options applicable</p>
      <p>The command takes options applicable</p>
      <p>The command takes options applicable</p>
      <p>The command takes options applicable</p>
      <p>The command takes options applicable</p>
      <p>The command takes options applicable</p>
      <p>The command takes options applicable</p>
      <p>The command takes options applicable</p>
      <p>The command takes options applicable</p>
      <p>The command takes options applicable</p>
      <p>The command takes options applicable</p>
      <p>The command takes options applicable</p>
      <p>The command takes options applicable</p>
      <p>The command takes options applicable</p>
      <p>The command takes options applicable</p>
      <p>The command takes options applicable</p>
    </div>
  </div>
</body>

</html>

1 Ответ

1 голос
/ 19 июня 2020

Событие прокрутки не будет запущено, если переполнение элемента скрыто. Вы можете использовать событие mousewheel. 

let timer;
let element = document.querySelector("body");

element.addEventListener('mousewheel', function(e) {
  clearTimeout(timer);
  var delta = e.wheelDelta;
  timer = setTimeout(function() {
    element.classList.add('hidescroll');
  }, 1250);

  element.classList.remove('hidescroll');
});
body.hidescroll {
  overflow: hidden;
}
<div class="wrapper">
  <div class="sidebar"> </div>
  <div>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
    <p>The command takes options applicable</p>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...