首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS或JS使vert滚动条仅在滚动时出现

CSS或JS使vert滚动条仅在滚动时出现
EN

Stack Overflow用户
提问于 2012-01-20 04:47:46
回答 1查看 9.3K关注 0票数 5

有谁知道如何让垂直滚动条只在滚动CSS或JS时出现?

谢谢

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-01-20 06:49:24

这可以使用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的元素上,以便只有当鼠标移动到右侧时滚动条才会出现。只有几个例子。

票数 8
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/8933051

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档