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

Question

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

javascriptcssscrollbar

6

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

谢谢。

- rd42

1

唯一（跨浏览器）的方法是使用自定义JS滚动条。这可以通过制作自己的滚动条来完成，或者您可以在网上搜索一个。 - LoveAndCoding

“挠头” 如果你已经在滚动，那不是意味着已经有一个滚动条了吗？ - j08691

好观点j08691，也许女老板会同意。 - rd42

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pseudosavant · Accepted Answer

您可以使用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的元素上，以便仅当鼠标移动到该侧时才出现滚动条。这只是一些例子。