11486 sujets

JavaScript, DOM et API Web HTML5

Empêcher scroll window iframe

Bonjour,

J'espère que vous allez bien malgré les circonstances actuelles.
Petite question :
J'ai ajouté un event au scroll sur le window de ma page. (Je lu ai demander de modifier le css d'un element à une hauteur précise du scroll avec scrollY ). Le problème c'est que dans cette page j'ai également un iframe d'une video Youtube. Donc lorsque le scroll atteint l'iframe, j'ai un nouveau window et ca scroll sur ce window et non plus celui de la page. Mon event ne fonctionne donc pas à ce moment.
Est-il possible de bloquer le scroll de mon iframe ?

Je vous remercie et vous souhaite une excellente journée !


Le JS : 
//SCROLL

var iframe = $('iframe')
console.log(iframe.contentWindow)

var reserver = $("#reserverFixe");
var socials = $("#socialsMain");
var reserverCollapseHeight = 223;
var socialsCollapseHeight = 139;
var bothCollapseHeight = 337;
var reserverCollapseHeightMobile = 65 ;
var socialsCollapseHeightMobile = 100;
var bothCollapseHeightMobile = 255;
const vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

if ($('body').scrollY >= bothCollapseHeightMobile) {
  socials.addClass("fixeVisibilityHidden")
  reserver.addClass("fixeVisibilityHidden")
};

window.addEventListener('scroll', function(e) {

  if (vw < 960 ){
        if (window.scrollY >= reserverCollapseHeightMobile) {
          reserver.addClass("fixeCollapsed")
        }
        else { reserver.removeClass("fixeCollapsed")};

        if (window.scrollY >= socialsCollapseHeightMobile) {
          socials.addClass("fixeCollapsed")
        }
        else { socials.removeClass("fixeCollapsed")};

        if (window.scrollY >= bothCollapseHeightMobile) {
          socials.addClass("fixeVisibilityHidden")
          reserver.addClass("fixeVisibilityHidden")
        }
        else { 
          socials.removeClass("fixeVisibilityHidden")
          reserver.removeClass("fixeVisibilityHidden")
      }
  }

  else {
      if (window.scrollY >= reserverCollapseHeight) {
        reserver.addClass("fixeCollapsed")
      }
      else { reserver.removeClass("fixeCollapsed")};

      if (window.scrollY >= socialsCollapseHeight) {
        socials.addClass("fixeCollapsed")
      }
      else { socials.removeClass("fixeCollapsed")};

      if (window.scrollY >= bothCollapseHeight) {
        socials.addClass("fixeVisibilityHidden")
        reserver.addClass("fixeVisibilityHidden")
      }
      else { 
        socials.removeClass("fixeVisibilityHidden")
        reserver.removeClass("fixeVisibilityHidden")
    }
  }
});


Le css : 

#edito iframe {
    margin: auto;
    height: 300px;
    margin-top: -153px;
    width: 500px;
    display: block;
}

Modifié par doisb (17 Apr 2020 - 11:18)
stryk a écrit :
Hello,

Tu as essayé d'ajouter cet attribut à ton iframe ?

scrolling="no"


Bonjour,
Oui j'ai essayé celui-ci et "scroll = no" aussi mais cela ne marche pas... De plus d'après W3School "The <iframe> scrolling attribute is not supported in HTML5."
Coucou, tu as essayé un simple overflow dans le css de ton iframe?


iframe {
overflow: hidden;
}
Sujet clos
Aller à