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

Question

I want to implement something like what google did here - This is how it comes initially. 我想实现类似google在这里所做的操作-这就是最初的方式。 No scrollbar. 没有滚动条。

But when the user clicks on more, or scrolls on this box, it scrolls down and scrollbar appears. 但是，当用户单击更多或滚动此框时，它会向下滚动并出现滚动条。

How can i implement something like this? 我如何实现这样的东西？

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

You can achieve that only using CSS Try that solutio also I have included custom scrollbar design. 您可以仅使用CSS来实现这一目标。尝试使用solutio，我也提供了自定义滚动条设计。 Hope it'd help 希望对你有帮助

 ::-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 个解决方案

解决方案1
2 2019-06-28 10:22:10

解决方案2
1 2019-06-28 10:41:20

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

问题描述

2 个解决方案

解决方案1 2 2019-06-28 10:22:10

解决方案2 1 2019-06-28 10:41:20

解决方案1
2 2019-06-28 10:22:10

解决方案2
1 2019-06-28 10:41:20