Setting overflow scroll using javascript

Question

I have a page where overflow-x is forced hidden(using !important) due to the usage of a css file(UIFix.css). But I need to have scrollbar visible. I can't modify the UIFix.css file.So I added the following at the end of the page below the UIFix.css file and it works.

<style>
body{overflow-x: scroll !important;}
</style>

However I want to make this fix using javascript instead of keeping the tags at the end of the page. I am trying the below piece of code on document load, but it does not work.

$('body').css('overflow-x','scroll','important');

I tried the above from chrome console and it did not work.

Andy Hoffman · Accepted Answer · 2018-07-06 09:01:06Z

1

You can achieve this using cssText.

$('body').css('cssText', 'overflow-x: scroll !important;');

answered Jul 6, 2018 at 9:01

Andy Hoffman

19.2k5 gold badges50 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

phuwin · Accepted Answer · 2018-07-06 09:08:42Z

1

You can create a css class that has your desired css such as:

.overflow-x-scroll {
    overflow-x: scroll !important;
}

Then add the class to the element with addClass():

$("body").addClass("overflow-x-scroll");

answered Jul 6, 2018 at 9:08

phuwin

3,2805 gold badges28 silver badges49 bronze badges

Collectives™ on Stack Overflow

Setting overflow scroll using javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related