web-dev-qa-db-fra.com

Forcer l'affichage de la barre d'adresse dans l'application Chrome mobile

Je travaille sur une application web. Le défilement est désactivé dans la plupart des applications, mais un panneau plein écran doit pouvoir être déroulé.

Le problème:

Si l'utilisateur se trouve dans la partie de l'application qui fait défiler et défile vers le bas, la barre d'adresse disparaît. Si, après la disparition de la barre d'adresse, l'utilisateur décide de quitter ce panneau en cliquant sur un X dans la barre de menus à positions fixes, la barre d'adresse ne se déclenchera jamais (car le défilement vers le haut ne se produit jamais) et l'utilisateur est donc coincé dans un défilement. -disabled address-bar-less state.

Ma question:

Est-il possible de forcer la barre d'adresse à s'afficher dans Google Chrome?

Liens!

JSBin sortie

JSBin code

btw

Définir simplement $ (fenêtre) .scrollTop (0) ne le fait pas.

Émuler en utilisant des outils de développement ne fonctionne pas. Vous devez l'ouvrir dans un appareil mobile, dans l'application Chrome.

Merci!

Exemple ci-dessous:

Pas de défilement autorisé, barre d'adresse affichée

img1)

Défilement autorisé, barre d'adresse affichée

img2

Défilement de l'utilisateur, masquage de la barre d'adresse

img3

Retournez à la section de défilement désactivée

img4

javascriptjquerycssgoogle-chromemobile
16
anastasia

Une solution de contournement consiste à utiliser un div en tant que conteneur à défilement pour le contenu du corps. De cette façon, le corps ne peut pas défiler, mais la div interne et Chrome ne masquent pas automatiquement la barre d'adresse lorsque cette div interne défile:

<body style="margin:0;padding:0;width:100%;height:100%">
  <div style="position:absolute;width:100%;height:100%;overflow:scroll">
    Content
  </div>
</body>

Barre de défilement visible: http://jsbin.com/zibewepiwo

Masquer la barre de défilement automatique: http://jsbin.com/yeyapijulo

Testé dans Chrome Beta 44.0.2403.63 et Chrome 43.0.2357.93 dans Android 4.4.2 (Samsung Galaxy Tab 3).

4
Timo Kähkönen
body {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 0;
}
.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
}

referance from http://goratchet.com/examples/app-movies/

Par chrome dev-tool, nous pouvions voir le code source.

2
Vincent Lin

Edit v2: Une méthode qui pourrait éventuellement fonctionner consiste à utiliser le 'Fullscreen API' et à détecter à chaque fois que l'utilisateur fait défiler (à l'aide d'une méthode jQuery) - puis indiquez au navigateur de quitter le mode plein écran à chaque fois pour conserver la barre d'adresse. Gardez à l'esprit que ceci n'a pas été testé, alors dites-moi si vous avez un peu de chance avec cette méthode ...

$(window).scroll(function(){
    document.webkitExitFullscreen();
    document.exitFullscreen();
});

Éditer: La lecture de la page FAQ de l'application pour mobile Chrome indique que, lors du défilement, la barre d'adresse est automatiquement désactivée, bien qu'elle ne spécifie aucune méthode pour le désactiver. Ce qui indique en outre que cela n’est pas possible.

Bien que cela ne soit peut-être pas une réponse à votre problème, je pense qu'il est utile de mentionner que de nombreux navigateurs ignorent les tentatives de manipulation manuelle du fonctionnement ou de l'affichage du navigateur, pour des raisons de sécurité spécifiques, souvent liées au phishing.

Pour cette raison, la possibilité de manipuler la barre d'adresse a été désactivée sur la version de bureau et bien que je n'ai pas encore trouvé de source identifiant cette possibilité sur un mobile Chrome, je pense que cette capacité sera probablement la même.

https://bugzilla.mozilla.org/show_bug.cgi?id=337344

2
Kolors

Utilisez ce code de style sur votre page. Maintenant, votre barre d’URL chromée ne se cachera pas.Il arrêtera de défiler.

<style type="text/css">
  html, body {margin: 0; height: 100%; overflow: hidden}
</style>

Vous pouvez aussi voir ici

0
Nitesh S Chauhan