仅在页面在CSS中滚动时显示滚动条 [英] Only show scrollbar when page scrolls in css

问题描述

我在< div> 中具有不同类型的图像的html页面，具有以下CSS属性：

I have an html page of different kinds of images in a <div> with following CSS property:

.images_container {
   position: relative;
   height: calc(100% - 200px);
   padding-top: 20px;
   overflow: auto;
   margin: auto;
}

当前正在显示页面滚动条，但我只想在用户滚动时显示滚动条这页纸。

Currently page scrollbar is showing but I want to show the scrollbar only when user scrolls the page. Is this possible in CSS or JavaScript?

推荐答案

如果您使用元素 scroll 事件，您可以执行以下操作，将 inner 设置为 width：100％，然后右填充：20px 。 （右填充的值必须大于滚动条的宽度）

If you hook up on the elements scroll event, you could do something like this, where you set the inner to width: 100% and a padding-right: 20px. (the padding right value need to be bigger than the scrollbar is wide)

这会将滚动条推出视野，并在滚动时移除填充，并启动计时器一站式滚动将重置填充

That will push the scrollbar out of view, and on scroll you remove the padding, init a timer which will reset the padding if one stop scrolling

(function(timer) {
  window.addEventListener('load', function() {
    var el = document.querySelector('.inner');
    el.addEventListener('scroll', function(e) {
    (function(el){
      el.style.padding = '0';
      clearTimeout(timer);
      timer = setTimeout(function() {
        el.style.paddingRight = '20px';      
      }, 100);    
    })(el);
    })
  })
})();

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

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

<div class="outer">
  <div class="inner">
    Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some
    content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some
    content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>
  </div>
</div>

已更新，使用 Element.classList ，而不是内联样式，这可能是更推荐的方式。

Updated, toggling a class, using Element.classList, instead of an inline style, which might be a more recommended way.

(function(timer) {
  window.addEventListener('load', function() {
    var el = document.querySelector('.inner');
    el.addEventListener('scroll', function(e) {
    (function(el){
      el.classList.add('scroll');
      clearTimeout(timer);
      timer = setTimeout(function() {
        el.classList.remove('scroll');
      }, 100);    
    })(el);
    })
  })
})();

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

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

<div class="outer">
  <div class="inner">
    Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some
    content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some
    content<br>Some content<br> Some content<br>Some content<br>Some content<br> Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>Some content<br>
  </div>
</div>

这篇关于仅在页面在CSS中滚动时显示滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！