1485 sujets

Web Mobile et responsive web design

Comment faire fonctionner le scroll dans une div sur iPad?

Bonjour, comment faire fonctionner le scroll dans une div de dimension fixe sur iPad, le scroll n'étant possible que sur la page entière ?
Je cherche quelque chose d'assez simple, qui pourra être intégré dans un script destiné au web en général.
Merci
Le scroll à l'intérieur d'un div/iframe se fait avec deux doigts. Smiley cligne

Pour donner des ascenseurs au div, il suffit de lui donner une taille fixe et jouer avec la propriété css overflow. Smiley smile
Modifié par Patidou (20 Aug 2010 - 12:33)
Patidou a écrit :
Pour donner des ascenseurs au div, il suffit de lui donner une taille fixe et jouer avec la propriété css overflow. Smiley smile

justement non car les safaris iOS ne gèrent pas l'overflow:scroll

j'ai vu passer récemment une librairie JS qui l'émule : http://cubiq.org/iscroll
Hum… Notre ami veut un header et un footer fixe avec une partie centrale scrollable? Effectivement sans js c'est pas possible.

Sinon le oveflow:auto fonctionne, dans une version précédente de de ce forum je faisais défiler le code avec deux doigts.
En effet je veux développer mon site avec Css, jquery, php, mysql et le tutti quanti de manière qu'il fonctionne aussi avec iPad, mais surprise hier soir en consultant le site avec mon ipad...pas de scroll overflow dans la partie centrale, super déçu après plusieurs semaines de boulot...
Je sais qu'on peut scroller avec deux doigts mais encore faut-il le savoir, peu de gens le savent, et de même qu'aucun ascenseur n'indique qu'on peut faire bouger la partie centrale.
J'ai vu la solution iScroll de cubiq.org 'scrolling div for mobile webkit', mais cela me parait pas évident à mettre en oeuvre, (tutorial en francais?), et puis alors qu'on me promettait de rendre plus simple et plus clair mon site 'framisé et dépassé', j'ai l'impression qu'on est repartis à bidouiller les scripts js et css et mettre des rustines partout pour que cela fonctionne avec ie-x et ie-y....
http://forum.alsacreations.com/smilies/decu.gif
Bonjour,

Si le but est d'avoir un header et un footer fixe, pourquoi ne pas utiliser position:fixed ? C'est fait pour et ça se dégrade (à peu près) bien sous IE6.

ps. : les rustines, c'est souvent dû à un problème en amont du navigateur...
Position: fixed ne fonctionne pas sous iOS (c'est voulu). Smiley cligne

Sinon le footer et le header fixe c'est plutôt pour faire ressembler une webapp à une app native. Dans le cas d'un site web «normal» ça ne me semble pas trop indiqué. On peut voir ton site en ligne?
Patidou a écrit :
Position: fixed ne fonctionne pas sous iOS (c'est voulu). Smiley cligne

Sinon le footer et le header fixe c'est plutôt pour faire ressembler une webapp à une app native. Dans le cas d'un site web «normal» ça ne me semble pas trop indiqué. On peut voir ton site en ligne?

Comme exemple, on peut voir une page de la version actuelle ici:
http://www.seedsplants.com/ResultChoix.php?pageNum_RsGenerale=0&totalRows_RsGenerale=158&Lang=fr&YY=Carac&VV=Designation%20ASC&XX=P&Titre=Palmiers%20et%20Assimil%E9s

et de la page d'essai avec css (en construction, les liens ne fonctionnant pas tous) ici:
http://www.seedsplants.com/ResultChoixCSS.php?pageNum_RsGenerale=0&totalRows_RsGenerale=158&Lang=fr&YY=Carac&VV=Designation%20ASC&XX=P&Titre=Palmiers%20et%20Assimil%E9s
Ah oui il y a encore beaucoup de travail… Smiley sweatdrop

Sinon au niveau design, AMHA ce n'est pas nécessaire d'avoir un header et un footer fixe dans ton cas. Smiley smile Ça n'apporte rien au visiteur, au contraire, ça prend de la place à l'écran.
Patidou a écrit :
Position: fixed ne fonctionne pas sous iOS (c'est voulu). Smiley cligne

Pour être plus précis, c'est implémenté ; mais, l'interaction entre une fenêtre qui ne peut être redimensionnée, le viewport et les effets de zoom fait que le positionnement fixe agit comme une espèce de positionnement absolu par rapport à l'élément body ou à l'élément racine html. (explications sur le site d'Apple)
Patidou a écrit :
Ah oui il y a encore beaucoup de travail… Smiley sweatdrop

Sinon au niveau design, AMHA ce n'est pas nécessaire d'avoir un header et un footer fixe dans ton cas. Smiley smile Ça n'apporte rien au visiteur, au contraire, ça prend de la place à l'écran.

- Le header est nécessaire question confort principalement pour que le montant du sous-total (en haut à droite) reste visible lorsqu'on entre un item dans le panier (actualisation instantanée du montant), garder l'accès direct au panier en permanence (qui s'ouvrira alors sous forme de tiroir), et pour avoir à portée le retour au menu principal (en haut à gauche) à tout moment.
- Le footer moins nécessaire mais quand même (...) je veux pouvoir y placer des boutons de navigation style descendre ou remonter par paliers (de 3-4 lignes par exemple)

Attention, la page est en construction, donc tout n'est pas fonctionnel encore, loin de là... plusieurs semaines de boulot en vue.

Bref...et merci pour votre aide, sympa.
THAL a écrit :
garder l'accès direct au panier en permanence (qui s'ouvrira alors sous forme de tiroir), et pour avoir à portée le retour au menu principal (en haut à gauche) à tout moment.

THAL a écrit :
pouvoir y placer des boutons de navigation style descendre ou remonter par paliers (de 3-4 lignes par exemple)

Et pourquoi ne pas insérer des liens d'accès direct, selon le principe des ancres ? Smiley cligne 
<div id="panier">
<!-- Ici le code de ton panier -->
</div>
<!-- Plusieurs centaines de lignes de code plus bas -->
<a href="#panier">Aller au panier</a>
Bon, je crois que la seule solution c'est de faire une version du site spécifique à l'ipad, comme je l'ai fait pour l'iphone lorsqu'on consulte le site avec un iphone, depuis le menu principal.
En attendant que les choses soient plus simples, mais là je crois que c'est du domaine du rêve... Smiley rolleyes
Sujet clos
Aller à