CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
user1497256
user1497256

Reputation: 261

How can I disable clicks but still allow scrolling in an iframe?

I have an iframe showing on my page in a panel of a fixed height but the page rendered in the iframe is much larger. I don't want the user to be able to click on anything in the iframe. I know that the general solution to this would be to have an invisible div on top of the iframe to disable all interaction. However, this also disables the ability to scroll. Is it possible to catch and ignore any clicks on the iframe page but still allow the scroll to be propagated?

Upvotes: 22

Views: 33215

Answers (2)

Jeffrey Yu
Jeffrey Yu

Reputation: 1

As a follow up to this thread, is there a way to get this iframe to dynamically update to the size of the src page?

Currently I use a magic number of 1000vh to display the google doc, but I'm trying to figure out how to set it so that it will dynamically become only the length necessary (e.g. 500vh, 750vh, etc.). I've tried implementing it in React, but can't figure out how to update the iframe height style attribute accordingly.

For context, I'm using a Custom Component in ReTool.

<style>
  div {
    width: 100%;
    height: 100%;
    overflow: scroll;
  }
  
  iframe {
    width: 100%;
    height: 1000vh;
    pointer-events: none;
  }
</style>

<!-- You can add any HTML/CSS/JS here. UMD versions are required.
Keep in mind that Custom Components are sensitive to bundle sizes, so try using a
custom implementation when possible. -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<div id="react"></div>

<script type="text/babel">
  // Function to create the iframe element
  function createIframe(fid) {
    return <iframe src={`https://docs.google.com/document/d/${fid}/edit?usp=sharing`}></iframe>;
  }

  // Function to create the div element containing the iframe
  function createDiv(fid) {
    return <div>{createIframe(fid)}</div>;
  }

  // Main React component
  const MyCustomComponent = ({ model }) => {
    
    return createDiv(model.fid);
  }

  // This is the entrypoint for the React component.
  const ConnectedComponent = Retool.connectReactComponent(MyCustomComponent)
  const container = document.getElementById('react')
  const root = ReactDOM.createRoot(container)
  root.render(<ConnectedComponent />)
</script>

Upvotes: 0

user4447799
user4447799

Reputation:

If you don't want the contents of the iframe to be interactable by the user, you can disable pointer-events on it. But as you want it to be scrollable, just put a full sized iframe in a smaller div with overflow: scroll.

div {
  width: 50vw;
  height: 50vh;
  overflow: scroll;
}

iframe {
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}
<div>
  <iframe src="http://example.com"></iframe>
</div>

Upvotes: 24

Related Questions