Javascript-форум - как заблокировать события внутри iframe

MDN говорит, что многое задаётся для SVG. и сеть предлагает такой вариант:

<head>

<script>
function addlistener() {
  var scrollable = document.getElementsByClassName("scrollable-container")[0];
  scrollable.addEventListener('mousedown', function() {
    this.style.pointerEvents = "none";
    document.elementFromPoint(event.clientX, event.clientY).click();
  }, false);

  document.getElementsByClassName("app")[0].addEventListener('mouseup', function(e) {
    scrollable.style.pointerEvents = "all";
  }, false);
}
</script>

<style>
body {
  overflow-y: hidden;
}

.app {
  overflow-y: hidden;
  position: relative;
  display: flex;
  flex-direction: row;
  z-index: 0;
}

.scrollable-container {
  width: 100vw;
  height: 100vh;
  margin-left: -18px;
  position: absolute;
  overflow-y: scroll;
  z-index: 10;
}

.scrollable-content {
  width: 500px;
  height: 1600px;
}

.non-scrollable-container {
  flex: 1;
  height: 100vh;
  overflow-y: hidden;
}

.bridge {
  width: 40px;
  background: linear-gradient(white, black);
  cursor: ew-resize;
  height: 100vh;
}

#original {
  background: linear-gradient(red, yellow);
  height: 2100px;
}

#modified {
  background: linear-gradient(blue, green);
  height: 1600px;
}
</style>
</head>
<body onload="addlistener()">
  <div class="app">
    <div class="scrollable-container">
      <div class="scrollable-content"></div>
    </div>
    <div class="non-scrollable-container">
      <div id="original" class="codeBlock">
        Content I want to select
      </div>
    </div>
    <div class="bridge"></div>
    <div class="non-scrollable-container">
      <div id="modified" class="codeBlock">
        Content I want to select
      </div>
    </div>
  </div>
</body>