滚动条自动隐藏,如何实现?

像那些在线电子邮箱,右边的滚动条,只有在需要的时候才出现,这个是如何实现的?
用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> 

预览效果:
图片说明

当文字比较少时,没有滚动条,当文字比较多时,才会出现滚动条:
图片说明