如何僅在用戶在div上滾動時顯示滾動條

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來實現這一目標。嘗試使用solutio，我也提供了自定義滾動條設計。 希望對你有幫助

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