I am trying to add 'overflow: hidden !important' property in body tag of lightning page.

For this, i did the following

document.body.style.overflow = 'hidden !important'

Unfortunately, it didnot work. The style should be applied when a popup opens. Any idea on how i can do this?


You can't do that in LWC, because of the Shadow DOM, as well as the Locker Service. If you're running a "full screen app" (e.g. the top-level component is in a Lightning App), you could put this style on the top-level component, but if you're in the Lightning Experience, you wouldn't be able to do this.

  • 1
    I want to use overflow: hidden style because i wanted to hide scrollbar from record page (lightning experience). This needs to be done when a modal popup opens. Any idea on how i can do this? – lambad Oct 22 '19 at 14:57
  • 1
    @lambad Again, you can't. It's a limitation because of security restrictions. If you could access the DOM at will, you'd be able to create all sorts of malicious components. To limit the mischief one can do, security is strictly enforced. – sfdcfox Oct 22 '19 at 15:07
  • I was able to add style to body tag by doing document.body.style.position = 'fixed'; Do you think this this is an issue in salesforce? – lambad Oct 23 '19 at 16:01
  • @lambad As I understand it, it shouldn't be possible, but perhaps I've overlooked something. I'll try it tonight and get back to you. – sfdcfox Oct 23 '19 at 19:23
  • This is a frustrating limitation and one Salesforce should never prevent users from doing – Andy Ray Jan 14 '20 at 20:38

document.body.style.overflow = 'hidden';

Remove the 'important'. It worked for me.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.