Home/ Questions/Q 3844450
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T16:05:29+00:00

function allowscroll() { if (screen.width<1200){document.getElementById(‘html’).style.cssText=’overflow-x: scroll !important;’;}; } <body onLoad=allowscroll();> hi there, the above

  • 0
function allowscroll()
{
if (screen.width<1200){document.getElementById('html').style.cssText='overflow-x: scroll !important;';};
}

<body onLoad="allowscroll();">

hi there, the above code works for any element, e.g. subbing “html” for “wrapper”, but how is it possible to edit the css applied to html? Basically, because of overflow:hidden not inheriting in ie7 – which causes a big empty righthand margin and horizontal scrollbar (only in ie7, ie 8 compatibilty), ive set the css to

html {overflow-x:hidden;}

this is the only way to fix it without losing necessary functionality, e.g. overflowed graphics visibilty.

and this is all well and good, however, lower screen resolutions need the horizontal scroll just to see all of the page itself, so I’m attempting to restore the horizontal scrollbar for those users – and restore the big right margin for anyone who happens to be, for example ie7 1024 by 768 – I can live with that (unless anyone happens to have a superdupa solution).

document.getElementById('html').style.cssText='overflow-x: scroll !important;';

So the above code works for editing the CSS of any element, but not the CSS of the html.

I’ve also tried:

function allowscroll()
{
if (screen.width<1200){document.getElementByName('html').style.cssText='overflow-x: scroll !important;';};
}

and

function allowscroll()
{
if (screen.width<1200){window.style.cssText='overflow-x: scroll !important;';};
}

I would really appreciate any help, – if it helps in seeing the solution, the link where this applies is: delight design, basically, its how to take out:

html {overflow-x:hidden;}

from the css when in lower screen resolutions…

many thanks

Will

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are a bunch of different ways to get the html element:

    document.documentElement
document.getElementsByTagName('html')[0]
document.body.parentNode

    But in all honesty, there must be a better way. I don’t have time right now to track down what exactly happened here, but from what I can tell, adding position:relative to whatever needs the overflow might help.

    • 0