Scrolling iframes

Demonstration on how iframes are opaque to almost every event, except they let their parent scroll once they hit a scroll end.

by David Iglesias

HTML

<div id="scrolling">
  <div id="container">
    <iframe id="iframed" src="https://www.flutter.dev"></iframe> 
  </div>
</div>

CSS

* { box-sizing: border-box; }
html {
  display: flex;
  flex-direction: column;
  height: 100%;  
}
body {
  overflow: hidden;
  background: #09f;
  flex: 1;
  display: flex;
  flex-direction: column;
}

#scrolling {
  overflow: auto;
  display: flex;
  flex: 1;
  background: red;
  flex-direction: column;
}

#container {
  display: flex;
  height: 1000px;
  flex-shrink: 0;
  background: #f90;
  align-items: center;
}

#iframed {
  width: 100%;
  height: 333px;
}

JavaScript

function attachListener(event, selector) {
console.log('Attaching', event, 'to', selector);
let target = selector == 'window' ? window : document.querySelector(selector);
target.addEventListener(event, function(e) {
  console.log(event, 'on', selector);
})
}

attachListener('scroll', '#scrolling');
attachListener('mousewheel', '#scrolling');
attachListener('mousewheel', '#iframed');

let scrolling = document.querySelector('#scrolling');

scrolling.scrollTop = scrolling.clientHeight / 2;