Chrome下滚动条隐藏 不是 overflow那种形式

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

阅读 16.7k
评论
    3 个回答
    • 4.3k

    方法很简单:不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才能实现


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

      相似问题
      推荐文章