CSS或JS使垂直滚动条仅在滚动时出现

Question

有谁知道如何让垂直滚动条仅在用 CSS 或 JS 滚动时出现？

谢谢

Answer 1

这可以使用 CSS 或 JavaScript/jQuery 来完成。

以下是一些示例：

// JavaScript Example
document.querySelector('.jsExample').addEventListener('mouseenter', function(e){
  e.target.style.overflow = 'auto';
}, false);

document.querySelector('.jsExample').addEventListener('mouseleave', function(e){
  e.target.style.overflow = 'hidden';
}, false);


// jQuery Example
$('.jQueryExample').hover(
  function() { // Run on hover/mouseenter
    $(this).css('overflow', 'auto');
  },
  function() { // Run on mouseleave
    $(this).css('overflow', 'hidden');
  }
);

/* CSS Example */
.cssExample { overflow: hidden; }
.cssExample:hover { overflow: auto; }


/* Unimportant CSS just to setup examples */
.cssExample, .jsExample, .jQueryExample {
  background: #EEE;
  box-sizing: border-box;
  height: 4em;
  width: 300px;
  padding: 0.5em 1em;
  margin-bottom: 1em;
  overflow: hidden;
}
.cssExample::after, .jsExample::after, .jQueryExample::after {
  display: block;
  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="cssExample">CSS Example</div>
<div class="jsExample">JavaScript Example</div>
<div class="jQueryExample">jQuery Example</div>

使用 JavaScript 或 jQuery 版本，您可以执行更多操作，例如显示自定义滚动条或将悬停事件侦听器附加到覆盖滚动元素右侧 100px 的元素，以便滚动条仅在鼠标移动到该侧时出现。仅举几个例子。