CSS webkit scrollbar show/hide

后端 未结 5 961
萌比男神i
萌比男神i 2021-01-31 21:47

I\'m using -webkit-scrollbar and what I want to happen is the scrollbar hidden on page load, and it stays hidden until you hover over the container div it is attached to. When y

5条回答
  •  死守一世寂寞
    2021-01-31 22:37

    You can use simple CSS to achieve this.

    Eg. if you have a div #content-wrapperthat scrolls with background-color: rgb(250, 249, 244);

    #content-wrapper::-webkit-scrollbar-thumb {
      background-color: rgb(250, 249, 244); /* Matches the background color of content-wrapper */
    }
    
    #content-wrapper:hover::-webkit-scrollbar-thumb {
      background-color: gray;
    }
    

    F.Y.I. You could set the thumb's opacity to zero (instead of matching the background color), but the opacity seems to then apply to other scrollbars on the page as well.

    P.S. This assumes that you're ::-webkit-scrollbar-track's background color also matches the #content-wrapper's background color.

提交回复
热议问题