Autohide

[tobias-r]

Hi,

I have another feature idea, which should be pretty simple and cool.

Add a class to scrollbar-thumb only while scrolling and remove when done with scrolling.

It then would be possible to only make the scrollbar-thumb only visible while scrolling, like for example on a mac. With css transition it would go nice and smooth :-)

.thumb { opacity:0; transition: opacity .5s; transition-delay: 0s; } .thumb.new_class_added_on_scrolling { opacity:1; transition: opacity 2s; transition-delay: 2s; /* hide thumb with a delay of 2 seconds */ }

Tobias

[mzubala]

Hi

Can't you just use :hover and :active in css to achieve this?

[tobias-r]

Well, not really (I hope I am not wrong here).

It's no problem using the mouse to scroll. But with the scroll wheel it's not working that way. And I guess 99% of all users use scroll wheel.

[mzubala]

On mac (mountain lion) scrollbars are always visible. When you hover mouse over the scrollbar it changes opacity. It doesn't change when you wheel scroll. This can be implemented just using css :hover selector.

Adding an extra class while wheel scrolling is probably doable but not easy as it would involve using timers to remove the class after some time after last mousewheel event.

[tobias-r]

Look, it really depends on the device.

On my iMac I always see the scrollbars, on my MacBookAir scrollbar behaves like I described. Both run the same system, now Maverick, but it has been the same for Mountain Lion.

A timer, which removes class after last mousewheel event would be awesome. In my example I added the delay with css, but with a timer, it'd do the exact same.

Are you gonna integrate it?

[mzubala]

No I don't see much value in it. If you really need it in your project you can implement it using customScroll event which is triggered whenever you scroll. In the handler you can set the class and add a timer that will remove it after some time.

[tobias-r]

yes, or I could change your code, but then I couldn't get new versions anymore and I like your progress.

Why I think it would be cool: 1) your scrolling thumb is of absolute position, so it layers over the content and will cover the content. If you add a padding, no probs, but then it will look weird if content is not scrollable. 2) On my website in one case, there are 2 scrollcontainers next to each other. It simply looks a bit too full with all the scrollbars. 3) It keeps the UI clean, if there is not a lot of space available. That's why apple does it in with smaller screens on Mac OS X and in iOS - and Google in Android too!

No chance? Shouldn't be much work or code!?