程式設計雜筆

[程設雜筆] 試玩 CSS custom scrollbar

一般來說,如果網站不是要做的特別猛,我們不太會去更改scrollbar的樣式。話雖如此,我還是覺得自己設計的scrollbar很酷,雖然只是一個小地方,但改了整個心情就是很不一樣,對於網頁也會有不等的加分效果。

custom-scrollbar這是從FB上抓下來的custom scrollbar。其實會發現,custom scrollbar 在網頁中還蠻常出現的,只是我們不太會去注意而已。

下面放上教學網站和範例(這個custom scrollbar 只限定在使用webkit的瀏覽器上使用而已,也就是chrome safari opera)

https://css-tricks.com/custom-scrollbars-in-webkit/

和我自己的code:


::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
-webkit-border-radius: 10px;
border-radius: 10px;
margin:80px 0 5px 0;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 4px;
border-radius: 4px;
background: rgb(219,219,219);
}

custom-scrollbar2

補充:

在popout一個dialog後,如果dialog滑到底的時候,瀏覽器就會轉而去滑z-index比較小的scrollbar,要避免這個現象,就要使用小技巧固定住底層的scrollbar,方法如下:


$('body').css('overflow-y', 'scroll');

別人的demo:

http://jsfiddle.net/6eyJm/1/

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s