Question

我想实现类似google在此处所做的功能- 最初就是这样。没有滚动条。

但是，当用户单击更多或滚动此框时，它会向下滚动并出现滚动条。

我如何实现这样的功能？

Answer 1

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

Answer 2

您只能使用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>

如何仅在用户在div上滚动时显示滚动条

2 个答案: