web-dev-qa-db-fra.com

Comment puis-je afficher des barres de défilement dans Mobile Safari?

Le plug-in de sélecteur de temps jQuery que j'ai écrit utilise un div comme bloc conteneur pour la liste des heures, et sur Mobile Safari, aucune barre de défilement n'indique qu'il y a plus d'heures disponibles que visibles. Je sais utiliser deux doigts pour faire défiler le div (sur l'iPad au moins), mais cela ne fonctionne que si l'utilisateur sait qu'il y a plus de contenu à faire défiler àet rien n’indique qu’il en existe. Alors, ma question: est-ce que quelqu'un a pu afficher des barres de défilement dans Mobile Safari? Comment avez-vous le faire?

mobile-safari
17
Daniel Cotter

En supposant que vous utilisez iOS5.0 ou plus tard, je pense que vous devez utiliser les éléments suivants:

-webkit-overflow-scrolling: auto (ce qui est le style par défaut)

auto: un doigt défile sans élan.

L'autre style disponible est

-webkit-overflow-scrolling: touch

touchez: défilement natif. La spécification de ce style a pour effet de créer un contexte d'implantation (comme l'opacité, les masques et les transformations).

En utilisant le mode touch, la barre de défilement est visible lorsque l'utilisateur touche et fait défiler l'écran, mais disparaît lorsqu'elle n'est pas utilisée. Si vous voulez le rendre toujours visible, alors ceci old post vous aidera à:

::-webkit-scrollbar {
    -webkit-appearance: none;// you need to Tweak this to make it available..
    width: 8px;
}

Un autre morceau de code pour le pouce par @BJMC:

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}

Source primaire

Edit: en ce qui concerne cette démo , vous devez utiliser jQuery car cela vous aidera beaucoup, le code $(document).ready(function(){//your code with timer}) avec timer nécessitera de réinitialiser la propriété CSS à la normale après le temps souhaité (disons 5 sec.)

Pour la démo (que vous avez décrite), ceci est lancé avec l'événement onhover, veuillez vérifier ceci violon j'ai créé pour cela.

Cela reproduit les résultats dans un navigateur de bureau et fonctionne également sur iPad. Ajoutez simplement votre code de minuterie pour répondre à vos besoins.

24
MarmiK

Concernant la question initiale: la meilleure solution pour avoir des barres de défilement serait d’utiliser une bibliothèque externe (déjà recommandé iScroll est bon, mais même jQuery UI contient lui-même des barres de défilement ). Cependant, l'affichage de barres de défilement toujours présentes peut différer de l'interface utilisateur générale iOS (voir ci-dessous).

Une alternative serait d'indiquer avec d'autres éléments de l'interface graphique que le contenu est déroulable. Considérez de petits champs de dégradé à la fin de l'élément (le contenu passe à l'arrière-plan) suggérant que le contenu continue lorsqu'il est touché et fait défiler.

Dans iOS5 overflow: scroll fonctionne comme prévu, c’est-à-dire qu’il permet de faire défiler la div avec un doigt dans la zone spécifiée par les dimensions de la div. Mais div ne possède pas de barres de défilement. C'est un peu différent de l'interface utilisateur générale sous iOS (5). Généralement, il n'y a pas non plus de barres de défilement, mais elles apparaissent lorsque l'utilisateur commence à faire défiler une zone de contenu et à disparaître à nouveau une fois l'événement tactile terminé.

7
hanskan

Pour répondre au commentaire de Sam Hasler ci-dessus. Nicescroll 3 est un plugin jquery qui fait exactement ce que vous voulez avec l’effet de fondu en entrée/sortie et qui fonctionne dans tous les principaux navigateurs Mobile/Tablet/Desktop.

Démo en direct

Code:

$(document).ready(function() {    
    $("html").niceScroll({styler:"fb",cursorcolor:"#000"});
    $("#divexample1").niceScroll();//or styles/options below
    $("#divexample2").niceScroll("#wrapperexample2",{cursorcolor:"#0F0",boxzoom:true});
    $("#divexample3").niceScroll("#divexample3 iframe",{boxzoom:true});
  });
4
Gomino

Si vous voulez que le parchemin soit toujours visible,

Ne pas set -webkit-overflow-scrolling: touch

puis définissez un style personnalisé pour la barre de défilement

::-webkit-scrollbar {
    -webkit-appearance: none;// you need to Tweak this to make it available..
    width: 8px;
}

Vous perdez l'effet d'élan, mais la barre de défilement sera toujours là.

(testé sous iPhone 4/iOS 7)

2
lulalala

Safari mobile, autant que j'ai vu, ne supportera pas les barres de défilement. Le meilleur plugin que j'ai pu trouver pour faire le travail est this .

Ses démos sont disponibles ici . Il possède également plusieurs skins prédéfinis adaptés à votre application.

voici un échantillon de ce que vous obtiendrez -

enter image description here

1
Bilal Fazlani

Par convention, les barres de défilement ne sont pas utilisées sur iOS.

Pour un div avec overflow: scroll, le seul moyen de défilement natif est d'utiliser deux doigts.

Vous pouvez consulter iScroll , une bibliothèque JavaScript qui gère les événements tactiles et implémente le défilement à un doigt (ce que les utilisateurs attendent généralement dans les applications natives) pour les div.

0
Matt

jusqu'à ios5, vous ne pouviez pas faire défiler les divisions internes - vous ne voyez donc probablement pas de barre de défilement lorsque vous essayez de faire défiler car il n'y en a pas.

Je n'ai pas testé sur ios5 mais soi-disant faire défiler les divs internes fonctionne maintenant.

Si ce n'est pas une division interne, vous devriez pouvoir voir la barre de défilement uniquement lorsque celle-ci défile - cela ne concerne plus uniquement iOS - le lion s'est également débarrassé de toutes les barres de défilement natives. Vous ne pouvez les voir que lorsqu'une fenêtre défile ou que la fenêtre est chargée pour la première fois.

0
HarrisonJackson