1

我想实现,一个div有滚动条但是想鼠标移上去的时候滚动条显示出来,移出滚动条隐藏。我试了试对 ::-webkit-scrollbar {display:none} 可以实现,但是元素会有移动。用透明度对scrollbar不起作用。有其他办法吗? 谢谢

luger 702
2013-05-24 提问
3 个回答
5

已采纳

方法很简单:不hover时无背景色(所以看不见)

hover时有

参见我写了一个demo: http://jsfiddle.net/eHLqu/1/

核心思想是

div#container::-webkit-scrollbar {
    background: transparent;
}

div#container:hover::-webkit-scrollbar {
    background: lightyellow;
}

根据LZ对问题的进一步描述新增的两个解答

http://jsfiddle.net/t6g52/3/ 这一个很tricky,利用了背景色相同来隐藏


http://jsfiddle.net/vPmg6/1/ 这一个则需要JS才能实现


关于这两个,具体看下面评论

1
回复 luger

感觉似乎没办法。当然我还是写了下面这个demo,但是你一眼就可以看出局限性。那就是利用它背景色一样来隐藏。 http://jsfiddle.net/t6g52/3/ ================ 上面的demo是不用JS的,如果你能接受稍微用了JS的解决方案的话:我写了一个 http://jsfiddle.net/vPmg6/1/ 是一个貌似tricky实际上也很intuitive的解法 ================ 类似的你也可以在右边滚动条位置放一个placeholder DIV,然后用CSS3 selector来实现纯CSS的很tricky的解法

kmxz · 2013年05月24日

展开评论
0

顶楼上,nicescroll真的很棒,参见github

撰写答案

你可能感兴趣的

推广链接