像那些在线电子邮箱,右边的滚动条,只有在需要的时候才出现,这个是如何实现的?
用overflow-y:scroll是不行的
因为,即使没有超出,也会有一个滚动条,只是不能拉动而已
slide掉滚动条,用area,选择那一片区域,mouseover时,显示,当鼠标离开滚动条时,slide
什么叫需要时才出现?
overflow:auto,超出时才会出现
你试一下,看是否是你想要的那种效果,是的话自己改一下吧(顺带采纳一下-.-),
<script src="js/jquery-2.0.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('.mouseover').mouseenter(function(){
$('.visib').slideDown()
})
})
$(function(){
$('.visib').mouseleave(function(){
$('.visib').slideUp()
})
})
</script>
<style type="text/css">
.visib{
position: fixed;
right: 5px;
top: 100px;
width: 200px;
height: 350px;
background-color:silver;
/*visibility: hidden;*/
}
.mouseover{
position: fixed;
right: 5px;
top: 100px;
width: 200px;
height: 350px;
z-index: -5;
background-color:rgba(255,255,0,1);
/*visibility: hidden;*/
}
</style>
<body>
<div class="visib">
<p>visib</p>
</div>
<div class="mouseover">
<p>mouseover</p>
</div>
</body>
</html>
隐藏时使用overflow:hidden,这样滚动条是没有的。显示时,使用overflow:auto,根据内容是否超出自动显示。至于隐藏还是显示根据你的需求用事件来做监控。
把滚动条的属性设置改成auto,这样就可以根据内容自动显示或者没有滚动条了。
你可以在刚刚开始加载时候设置它的属性为隐藏overflow:hidden,
然后在写一个函数,这个函数里面设置它的属性为显示overflow:auto,然后你在鼠标滑动事件调用后面这个函数就可以了
::-webkit-scrollbar{width:0;height:0} 放在css顶部就解决了
overflow-y:auto; 自动不就可以了
设置宽度、高度,然后再使用overflow:auto。
示例代码:
<html>
<head>
<style type = "text/css">
#demo {
width: 300px;
height: 300px;
margin: 0 auto;
border: 1px solid red;
overflow-y: auto;
}
</style>
</head>
<body>
<div id="demo">
123<br>
</div>
</body>