0

I hope you are well despite the actual circumstances.

My question : I add an event on the window scroll of my page ( I ask to change css property of an element to a specific height). The matter is that i also put a Youtube iframe in that page. So when the scroll reaches the iframe, it scrolls in the iframe window and my event dont work at this point. Is it possible to avoid the iframe to allow scroll ?

Sorry for my broken english... Have a good day !

Js code :


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")
    }
  }
});

And CSS :

    margin: auto;
    height: 300px;
    margin-top: -153px;
    width: 500px;
    display: block;
}
  • Does this answer your question? [HTML iframe - disable scroll](https://stackoverflow.com/questions/15494568/html-iframe-disable-scroll) – BadPiggie Apr 17 '20 at 09:43
  • By default the iframe does not receive the sroll event untill you click on it (gets focused) otherwise you can scroll top and down even passing the cursor over the iframe while scrolling does nothing, you need to post a live version of your page so we can see the problem because I can't seem to simulate it on my browser – Saadi Toumi Fouad Apr 17 '20 at 10:10

0 Answers0