Re: Provide a standardized way to hide scrollbars

On 18/05/2014 17:33, Marc Nieper-Wißkirchen wrote:
> HI all,
>
> people often ask for a way to customize scrollbars in boxes with
> "overflow: scroll" or "overflow: auto" or to hide them altogether while
> still retaining native scrolling functionality (e.g. by touch, mouse
> wheel, keyboard or by script) - so "overflow: hidden" is no option.
>
> While there seems to be no standard way to customize scrollbars with CSS
> (and defining such a standard way would need quite a lot of thought),
>   even for hiding scrollbars there seems to be no consensus amongst
> browser vendors.
>
> In Webkit/Blink-based browsers there is the ::-webkit-scrollbar pseudo
> element, which can be styled with "display: none", while Internet
> Explorer 10+ implements a "-ms-overflow-style: none" property. Firefox
> provides no way to hide scrollbars (not counting ugly hacks).
>
> The Webkit/Blink-way to hide scrollbars is probably much harder to
> implement - as it would mean exposing a kind of internal DOM of the
> scrollbars and as it would even allow to customize them.
>
> On the other way, "overflow-style: none" should be easy to spec and
> implement and even appeared in the latest CSS basis box model working
> draft: http://www.w3.org/TR/css3-box/#the-lsquo3.
>
> I filed a bug report for Firefox to implement this property:
> https://bugzilla.mozilla.org/show_bug.cgi?id=1011851. There, the
> question was raised what the support of the spec I cited amongst the CSS
> WG members is.

Compared to 'overflow: scroll', 'overflow: hidden' disables all 
mechanisms that allow the user to scroll (including hiding scrollbars). 
It does not disable scrolling entirely: Element.scrollTop and 
Element.scrollLeft can still be set from script.

I suppose we could have a new keyword for the 'overflow' property that 
only hide scrollbars, but leaves other mechanisms. We already have a 
level 3 spec that extends this property:

http://dev.w3.org/csswg/css-overflow/


However, if the goal rather than just to hide the native scrollbars is 
to replace them with other scrollbars implemented in JavaScript, I’d 
recommend not to do that. Dispatching a DOM event and doing math in 
JavaScript before setting the new scroll position, for every frame, can 
probably not be as smooth as native scrolling which in some cases is 
done purely on the GPU.

-- 
Simon Sapin

Received on Wednesday, 21 May 2014 12:56:36 UTC