samedi 26 décembre 2015

Vertical scrollbar fades off on mobile Chrome browser (if not touchmove), a true?

Context :

The behavior described here seems to be the default one for Chrome for Mobile (I have not found anything in my code which can be linked with what I observe ; while I am developing a website which supports both most of devices PC and mobiles).

Fact

On mobile devices, the vertical scrollbar is not shown permanently for scrollable elements. This is a great difference of ergonomy opposite to PC environment (If the scrollable content and sized larger than the container then the scrollbar is permanently shown - overlay-y:scroll; -)

Details

I observe on mobile with Chrome that it is only when a "touchmove" event is issued into the element that the scrollbar appears and fades off when touch is ended.

Why a problem ?, Interpretation and point of vue

This can be a meaning information but different from PC and I think that it creates a lack and I am seeking to a good solution.

There is nothing which indicates to the user that the content of element is scrollable. Sometimes it is obvious but not always.

What say the scroll bars in the two cases ?

  • On Mobile the given information is : when you perform a touchMove : you are using a a scrollable zone" and the visible zone is "the length of the bar regardless the height of the element.

  • On PC the given information, is always "here is a scrollable zone" and the visible zone is "the length of the bar regardless the height of the element.

So the problem is, in my opinion, to add, in mobile use case, the information : this is a scrollable zone (So necessarily using a symbol because of the need of the optimization of the space).

What is the best way to do it ?

Best regards

Trebly


Note 1 : I got the (common) case when the content of top elements in scrollable viewport (a viewport into a general viewport) could be alone : the user doesn't understand that there here something else available to access by a scroll.

Note 2 : It is possible using js (and JQ) to check sizes and CSS parameters to show an icon (for example add .element-container::before { content: icon; }), but it not at all a light solution . As the icon, that I could develop, would not be a standard... there is no for now good solution, isn't right ?




Aucun commentaire:

Enregistrer un commentaire