Как показать полосу прокрутки только тогда, когда пользователь прокручивает на div - PullRequest
Новая
       21

Как показать полосу прокрутки только тогда, когда пользователь прокручивает на div

0 голосов
/ 28 июня 2019

Я хочу реализовать что-то вроде того, что сделал здесь Google - так оно и происходит изначально.Нет полосы прокрутки.

enter image description here

Но когда пользователь нажимает больше или прокручивает это поле, он прокручивается вниз и появляется полоса прокрутки.

enter image description here

Как мне реализовать нечто подобное?

Ответы [ 2 ]

2 голосов
/ 28 июня 2019 
(function(timer) {
  window.addEventListener('load', function() {
    var el = document.querySelector('.child');
    el.addEventListener('scroll', function(e) {
    (function(el){
      el.classList.add('scroll');
      clearTimeout(timer);
      timer = setTimeout(function() {
        el.classList.remove('scroll');
      }, 100);    
    })(el);
    })
  })
})();

.parent {
  height: 180px;
  width: 500px;
  border: 1px solid green;
  overflow: hidden;
}

.child {
  width: 100%;
  height: 99%;
  overflow: auto;
  padding-right: 20px;
}
.child.scroll {
  padding-right: 0;
}

<div class="parent">
  <div class="child">
    Hello World!<br>Hello World!<br>Hello World!<br> Hello World!<br>Hello World!<br>Hello World!<br> Hello World!<br>Hello World!<br>Hello World!<br> Hello World!<br>Hello World!<br>Hello World!<br> Hello World!<br>Hello World!<br>Hello World!<br> Some
    content<br>Hello World!<br>Hello World!<br> Hello World!<br>Hello World!<br>Hello World!<br> Hello World!<br>Hello World!<br>Hello World!<br> Hello World!<br>Hello World!<br>Hello World!<br> Hello World!<br>Hello World!<br>Hello World!<br> Hello World!<br>Some
    content<br>Hello World!<br> Hello World!<br>Hello World!<br>Hello World!<br> Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>
  </div>
</div>
1 голос
/ 28 июня 2019

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

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #aaa; 
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #b30000; 
}

.parent {
  height: 180px;
  width: 500px;
  border: 1px solid #000;
  overflow: hidden;
  padding: 15px;
}

.parent:hover {
  overflow-y: scroll;
}

.child {
  width: 100%;
  height: 180px;
  padding-right: 20px;
}

.child.scroll {
  padding-right: 0;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="parent">
  <div class="child">
    Hello World!<br>Hello World!<br>Hello World!<br> Hello World!<br>Hello World!<br>Hello World!<br> Hello World!<br>Hello World!<br>Hello World!<br> Hello World!<br>Hello World!<br>Hello World!<br> Hello World!<br>Hello World!<br>Hello World!<br> Some
    content<br>Hello World!<br>Hello World!<br> Hello World!<br>Hello World!<br>Hello World!<br> Hello World!<br>Hello World!<br>Hello World!<br> Hello World!<br>Hello World!<br>Hello World!<br> Hello World!<br>Hello World!<br>Hello World!<br> Hello World!<br>Some
    content<br>Hello World!<br> Hello World!<br>Hello World!<br>Hello World!<br> Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>Hello World!<br>
  </div>
</div>
</body>
</html>
...