Hijack page scrolling like Google Plus?

廉价感情. 提交于 2019-11-28 04:47:46

The have an element that has a fixed height and is overflow auto, they styles the scrollbar with this trick: http://beautifulpixels.com/goodies/create-custom-webkit-scrollbar/

You could make it work in FF and IE to: Basically you nest a element that is overflow auto into a other and hide the scrollbar with a negative margin. Then you capture the scroll event on that same element and adapt the slider on the right side according to the scrollTop position.

Here is how i would do it: http://jsfiddle.net/kGbbP/4/

But there are many jquery plugins that can do this: http://www.net-kit.com/jquery-custom-scrollbar-plugins/

Special K.

this isn't made via JavaScript!

It's pure CSS, and works only on (non-mobile) webkit based browsers.

Here is the CSS code, just include it in a CSS file, attach it to an HTML document, and run the .html file. Here is a demo: http://jsfiddle.net/3ZqGu/

And here is the CSS code:

::-webkit-scrollbar {
background:transparent;overflow:visible; width:15px;}
::-webkit-scrollbar-thumb {
background-color:rgba(0,0,0,0.2); border:solid #fff;}
::-webkit-scrollbar-thumb:hover {
background:rgba(0,0,0,0.4);}
::-webkit-scrollbar-thumb:horizontal {
border-width:4px 6px;min-width:40px;}
::-webkit-scrollbar-thumb:vertical {
border-width:6px 4px;min-height:40px;}
::-webkit-scrollbar-track-piece{ 
background-color:#fff;}
::-webkit-scrollbar-corner {
background:transparent;}
::-webkit-scrollbar-thumb {
background-color: #DDD;}
::-webkit-scrollbar-thumb:hover {
background-color: #999;}

i came across this link, i tried it a works great

Google Plus Scroll Style

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!