Member Avatar for kashmir323

I know dynamic content would be alot easier to use but because i dont know php and all that jazz yet iframe is my subsitute while i learn. my problem is that i cant figure out how to make the column on the left stop scrolling.

heres the site:

many thanks.

  • 4 Contributors
  • 6 Replies
  • 117 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Short answer: hiding the scrollbar only masks the symptom. You can either make the iframe match its content height (so nothing inside needs to scroll) or move the left column out of the iframe and fix it in the viewport. pointed toward resizing, noted hiding overflow, and is right that clipping content makes some information inaccessible — here are practical, reliable options depending on whether you control the framed page.

If you control the iframe document (same origin), have the child report its height and resize the iframe from the parent. This handles images and dynamic DOM changes; use a MutationObserver or send a message after async content finishes.

/* parent page */
function setIframeHeight(id) {
  var ifr = document.getElementById(id);
  try {
    var doc = ifr.contentDocument || ifr.contentWindow.document;
    var h = Math.max(doc.documentElement.scrollHeight, doc.body.scrollHeight);
    ifr.style.height = h + 'px';
  } catch (e) {
    // cross-origin: can't access
  }
}
document.getElementById('left').addEventListener('load', function(){ setIframeHeight('left'); });

If the iframe may be cross-origin, use postMessage from the child and an origin-checked listener in the parent:

/* inside iframe (child) */
function reportHeight() {
  var h = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
  parent.postMessage({iframeHeight: h}, 'https://your-parent-origin.example');
}
window.addEventListener('load', reportHeight);
new MutationObserver(reportHeight).observe(document.body, {childList:true, subtree:true});

/* parent listener */
window.addEventListener('message', function(e){
  if (e.origin !== 'https://your-parent-origin.example') return;
  if (e.data && e.data.iframeHeight) document.getElementById('left').style.height = e.data.iframeHeight + 'px';
});

If you do not control the framed content, avoid locking scroll by hiding scrollbars — instead pull that content into your page (AJAX/server proxy) and use CSS to create a fixed sidebar:

.leftcol { position:fixed; top:0; left:0; width:220px; height:100vh; overflow:auto; }
#main   { margin-left:220px; }

Cautions: hiding scrollbars hurts accessibility and will hide content (as noted). For responsive layouts, disable fixed sidebars on small screens. Combining resizing (or postMessage) with a content-level overflow rule gives the cleanest result if you must keep the iframe.

Recommended Answers

All 6 Replies

Member Avatar for peter_budo

Sorry I can't see your iframe with any scroll bar, but you can set the properties through scrolling

Member Avatar for kashmir323

i set the scrolling to hidden. use your mouse wheel click if you can or highlight the text.

Member Avatar for peter_budo

That is more problem of content vs iframe size. Content is larger then iframe, you should resize iframe, make it little bigger maybe some 5px would do it

Member Avatar for kashmir323

will this mess up the alignment of the template?

Member Avatar for Dani

A funny way to do it ... Set the overflow:hidden CSS style on the IFRAME.

Member Avatar for MidiMagic

I can't see all of it if it doesn't scroll.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.