程式設計雜筆

[程設雜筆] 試玩 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/

Advertisements

發表迴響

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

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s