Discussion :

[abc.xyz]

Bonjour,

mon souhait est d'annuler en jQuery une scrollbar positionnée dans le fichier CSS par l'instruction overflow-y:scroll sur la balise body.

J'ai donc codé:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('body').css({'overflow-y':'hidden'});

mais la scrollbar reste présente lorsque je teste le site sur mon iphone avec safari. J'ai lu sur le web qu'il y avait des problèmes avec safari pour cette propriété overflow-y donc que dois je faire pour malgré cela supprimer cette scrollbar?

Merci

[Watilin]

Si Safari/iPhone pose problème avec overflow-y, le mieux est d'essayer de ne pas du tout utiliser cette propriété. Il faut que tu te débrouilles en modifiant le CSS et/ou la structure HTML pour maîtriser la hauteur des différents éléments, afin que les éléments ne soient jamais plus hauts que le viewport, et que la barre n'aparaisse pas.

Au besoin utilise une media query (CanIUse media queries?).

Pour cibler précisément la plateforme qui pose problème, tu peux tenter de détecter le navigateur avec navigator.userAgent (pas fiable à 100% *) ou bien de tester directement si la fonctionnalité est supportée (peut devenir compliqué, voir par exemple http://stackoverflow.com/questions/1...to-in-browsers).

* A priori iOS ne permet pas à l'utilisateur de modifier/masquer sa chaîne userAgent, cependant des utilisateurs d'autres plateformes peuvent produire des faux positifs s'ils ont choisi d'exposer la chaîne userAgent de Safari/iPhone pour une raison ou une autre.

[abc.xyz]

Rebonjour,

voici exactement ma problématique:

sur une page du site sur mobile j'ai un formulaire de contact j'ai du donc mettre un overflow-y:scroll sur la balise body dans le fichier CSS pour que le formulaire puisse s'afficher dans sa totalité pour, plus exactement, que la barre de défilement soit présente et permette de faire défiler la page jusqu'en bas du formulaire. Sans le overflow-y:scroll la page s'arrête net sur mobile et le formulaire est "coupé".

Cependant le site utilise beaucoup la technologie AJAX : lorsqu'on est sur cette page de formulaire de contact le menu responsive (menu hamburger) permet au clic sur un de ses items de faire arriver par la droite une autre page, ce n'est en réalité pas une autre page on est en réalité toujours sur la même page c'est en fait AJAX qui remplit toujours sur la même page une div (prenant 100% de width et height de la page) avec du contenu et qui ensuite fait venir cette div de la droite. On a donc un effet de coulissement avec l'impression qu'une nouvelle page arrive en glissant depuis la droite.

Et c'est bien là le problème: comme en fait il n'y a qu'une page et que cette page a comme CSS un overflow-y:scroll sur la balise body, et bien lorsque le nouveau contenu chargé en AJAX remplit donc l'écran et bien le overflow-y:scroll en CSS permet de voir sous ce nouveau contenu le bas du formulaire de contact précédent. C'est pour ça que j'avais pensé au clic sur un item du menu à, comme expliqué dans le message précédent, changer la valeur de ce overflow-y de scroll à hidden. Mais safari sur iphone ne le prend pas en compte.

Voilà mon problème expliqué dans le détail.

Je ne vois pas comment faire car le overflow-y dans le fichier CSS sur la balise body me semble inévitable, à moins que il y ait une autre solution?

Merci

[Watilin]

As-tu pensé à masquer le formulaire avec JS au moment où la « page » suivante apparaît ?

[abc.xyz]

C'est ce qu'il fallait faire en effet, merci.

[abc.xyz]

Rebonjour,

j'en profite car j'ai un autre problème semblable voici:

je vous ai dit que le site utilise la technologie AJAX, en fait il y a plusieurs div sur la page concernée et ces div, en CSS d'abord on leur met une image de fond en position absolute, puis en jQuery on leur fait prendre 100% de width et de height puis on les met à droite de l'écran (on fait un left égal à la largeur de l'écran) et quand on clique sur un item du menu on fait un animate qui ramène la div concernée à left égal 0, d'où l'impression d'une nouvelle page chargée qui glisse depuis la droite.

Et bien en testant sur iphone, j'ai une barre de défilement horizontale en bas qui lorsqu'on s 'en sert fait aller le visiteur sur la div que l'on a positionné à droite (en faisant un left égal à la largeur de l'écran je vous le rappelle) c'est très embêtant car on ne devrait pas avoir accès à cette div que l'on a mis intentionnellement à droite dans le but de la faire glisser depuis la droite par la suite.

Comment supprimer cette barre de défilement?

Merci

[abc.xyz]

Pour être plus clair je ne comprends pas pourquoi sur mobile une barre de défilement horizontal apparait en bas d'écran ce qui montre bien que l'élément sur lequel on a fait un left de la largeur de l'écran est pris en compte alors que cela ne le fait pas sur ordinateur où l'élement sur lequel on a fait un left de la largeur de l'écran n'est pas pris en compte

[Watilin]

Est-ce que par hasard tu aurais un overflow-x: hidden sur ton <body> ou sur ton conteneur principal ?

PS : À tout hasard, essaye en rajoutant le préfixe -webkit-. Je ne garantis rien, mais ça ne coûte rien d'essayer…