5545 sujets

Sémantique web et HTML

[Résolu] Iframe problème scroll page

Hello!
Alors voilà je développe mon site web et pour se faire j'ai implémenté l'iframe d'un flipbook du catalogue fourni par mon sous traitant, cependant lorsque le curseur de la souris se trouve sur l'iframe cela empêche le scroll de la page web. La loupe pour zoomer sur le catalogue s'affiche, et bloque le scroll.
Y'a t'il un moyen de garder cette loupe mais de pouvoir scroll sur la page normalement ?
voici le code de l'iframe :
<iframe src="http://www.zyyne.com/zh5/128261" scrolling="auto" width="80%" height="600" frameborder="0" allowfullscreen="true"></iframe>


Je vous remercie d'avance pour votre aide !
Modérateur
Bonsoir,

Ce que vous évoquez revient à faire un choix entre scrolling et height.

En effet, soit vous fixez la hauteur de l'iframe auquel cas en cas de contenu plus long une barre de scroll apparait soit vous laissez la hauteur libre de s'adapter au contenu et aucune barre n'apparait - dans ce cas, passez scrolling sur "no".

Mais vous ne pouvez avoir scrolling="no" et height="600" à moins d'être absolument certain que le contenu de l'iframe ne dépasse pas 600px de hauteur.
En fait je ne parle pas du scroll de l'iframe en elle même, mais plutôt du scroll de la page web dans sa globalité. Lorsque la sourie se situe dans l'iframe le scroll de la totalité de la page est bloqué.
Je vous ai envoyé le lien de la page en privé pour que vous puissiez visualiser.
Merci pour votre réponse !
Modérateur
Bonjour,

Autant pour moi. Effectivement, je suis allé y jeter un œil et... c'est chiant ! (je parle du scroll, qu'il n'y ai pas de quiproquo).

A brule pourpoint je pense que c'est solvable en JS. Je pense à une écoute de l'évènement "quand le curseur survole l'iframe" désactiver le scroll dans l'iframe mais le répercuter à body (à moins qu'en empêchant la possibilité de scroller en son sein la répercussion soit automatique).

Néanmoins mes compétences en JS sont très, mais alors très limitées, à tel point que je ne saurais vous indiquer avec précision le code qui ferait office.

A voir si une bonne âme douée en JS passe par ce sujet afin de pouvoir vous apporter plus de renseignements.

Toutefois, pourquoi m'envoyer le lien en privé, moi qui ne suis à vos yeux qu'un parfait inconnu, au lieu de le déposer (délicatement) ici bas ?! Sa présence faciliterait et encouragerait à la recherche d'une solution.

Bonne continuation.
Modifié par Greg_Lumiere (24 Jun 2017 - 07:35)
Bonjour,
J'avais bien pensé au JS mais mes compétences elles aussi sont limités...
Je vais chercher dans cette voie la!

Merci a vous !
Modifié par saario (24 Jun 2017 - 19:16)
Bonjour à tous
Question qui n'a rien (ou presque) à voir:
Le code HTML utilisé est 
<iframe src=".........." scrolling="auto" width="80%" height="600" frameborder="0" allowfullscreen="true"></iframe>

Ma question: qu'est-ce qui peut être défini par CSS dans ce code?
A priori "width", "height", "frameborder", mais quid de "scrolling" et "allowfullscreen"?
Bonjour,
allowfullscreen est l'attribut qui sert a mettre en plein écran l'iframe,
quant à l'attribut scrolling il ne peut avoir que 3 valeurs (yes, no, auto)
Je ne pense pas qu'ils soient modifiables en css, si ce n'est que pour leur attribuer une valeur prédéfinie ci dessous.
Modérateur
frameborder et scrolling sont obsolète depuis html5. On les met souvent pour des raison de compatibilité mais ça devient de moins en moins utile.

scrolling se définit en CSS grâce à overflow.

allowfullscreen n'a pas d'équivalent en css.
kustolovic a écrit :
frameborder et scrolling sont obsolète depuis html5. On les met souvent pour des raison de compatibilité mais ça devient de moins en moins utile.

scrolling se définit en CSS grâce à overflow.

allowfullscreen n'a pas d'équivalent en css.

Merci!
Mon problème est résolut, si cela peut aider quelqu'un :
JQuery:
$('.ClassCSS')
    .click(function(){
            $(this).find('iframe').addClass('clicked')})
    .mouseleave(function(){
            $(this).find('iframe').removeClass('clicked')});


CSS :
.ClassCSS {
    width: 100%;
}
.ClassCSS iframe{
    display: block;
    width: 100%;
    position: relative;
    pointer-events: none;
}
.ClassCSS iframe.clicked{
    pointer-events: auto;
}


HTML:
<div class="ClassCSS">
    <iframe width="80%" height="450" frameborder="0"
        scrolling="no" src="">
    </iframe>
</div>


Bonne soirée !
Modifié par saario (24 Jun 2017 - 19:17)
Meilleure solution
Greg_Lumiere a écrit :
Bonsoir,

Ce que vous évoquez revient à faire un choix entre scrolling et height.

En effet, soit vous fixez la hauteur de l'iframe auquel cas en cas de contenu plus long une barre de scroll apparait soit vous laissez la hauteur libre de s'adapter au contenu et aucune barre n'apparait - dans ce cas, passez scrolling sur "no".

Mais vous ne pouvez avoir scrolling="no" et height="600" à moins d'être absolument certain que le contenu de l'iframe ne dépasse pas 600px de hauteur.


Bonjour, je me permets de déterrer ce topic et de vous citer car je me trouve avec ce problème (je crois).

Je suis en train de créer mon petit site web perso et j'utilise le système des iframe pour, avec un menu, appeler le contenu de différentes pages (par exemple, mon menu a les boutons "Carnet de bord", "Projets" et "Sites" et quand on clique sur le premier, l'iframe appelle la page qui correspond au carnet de bord, etc).

Mon souci, c'est que lorsque j'appelle ces pages, la hauteur de l'iframe ne s'adapte pas. Par exemple, pour la page des projets, un scroll apparait pour pouvoir lire tout le contenu de l'iframe. Sauf qu'avec la page qui accueille l'iframe, il y a déjà un scroll et donc ça fait un peu doublon (en plus de pas être pratique).
J'aimerais faire en sorte qu'on n'ait jamais à scroller l'iframe pour lire tout son contenu, que ce contenu apparaisse toujours entièrement et qu'on ait à scroller la page qui accueille l'iframe au lieu de devoir toujours scroller l'iframe.

Je suis tout juste inscrit ici donc je sais pas trop si je donne assez de détails ou pas, mais je suis dispo pour en apporter si nécessaire.

Voici le HTML de mon iframe:

<iframe id="frame" scrolling="yes" src="dernierarticle.html" border="0" frameBorder="NO" height="100%" ></iframe>


Et le CSS:

#frame {
    display: block;
    position: center;
    overflow: hidden;
    width: 1200px;
    height: 600px;
    z-index: 1;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
}
Modérateur
Bonjour,

NumaC a écrit :


Bonjour, je me permets de déterrer ce topic et de vous citer car je me trouve avec ce problème (je crois)...


Ouvre un autre sujet, et précise sur quel OS et quel(s) navigateurs tu as testé.

Amicalement,
Sujet clos
Aller à