使用jQuery删除overflow-x和overflow-y

Question

I want to remove overflow-x and overflow-y using jQuery. I have tried several methods, but they don't seem to work:

Here is my code:

body #s4-workspace {
  left: 0;
  overflow-x: auto;
  overflow-y: scroll;
  position: relative;
}

<div class="" id="s4-workspace" style="height: 463px; width: 1280px;">other tags</div>

Here are the methods I've tried:

1)

$('body #s4-workspace').css('overflow-x','');
$('body #s4-workspace').css('overflow-y','');

2)

$('body #s4-workspace').removeProp('overflow-x');
$('body #s4-workspace').removeProp('overflow-y');

If I output the overflow properties after either method, I see no change in their values.
See my demonstration below:

 $(document).ready(function() { try { $('body #s4-workspace').css('overflow-x', ''); $('body #s4-workspace').css('overflow-y', ''); $('body #s4-workspace').removeProp('overflow-x'); $('body #s4-workspace').removeProp('overflow-y'); alert($('body #s4-workspace').css('overflow-x')); } catch (e) { alert(e); } }); 

  body #s4-workspace { left: 0; overflow-x: auto; overflow-y: scroll; position: relative; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="s4-workspace" style="height: 463px; width: 1280px;">other tags</div> 

View on JSFiddle

How can I remove overflow with jQuery?

Answer 1

You just need to set them to their default values - visible :

$('body #s4-workspace').css('overflow-x','visible');
$('body #s4-workspace').css('overflow-y','visible');

Answer 2

Explanation

According to jQuery's css() documentation :

Setting the value of a style property to an empty string ... does not ... remove a style that has been applied with a CSS rule in a stylesheet or element.

I've demonstrated that issue below -- notice that there is no change in the overflow value:

 $(function() { var $workspace = $('#s4-workspace'), $output = $('#outout'); $('div#output').html("<span>Old overflow value: " + $workspace.css('overflow-x') + "</span>"); $workspace.css('overflow-x', ''); $('div#output').html($('div#output').html() + "<span>Old overflow value: " + $workspace.css('overflow-x') + "</span>"); }); 

 #s4-workspace { overflow-x: auto; } #output span { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="s4-workspace">other tags</div> <div id="output"></div> 

However, an empty string will reset overflow to its default value if it's been set by jQuery :

 $(function() { var $workspace = $('#s4-workspace'), $output = $('#outout'); $workspace.css('overflow-x', 'auto'); $('div#output').html("<span>Old overflow value: " + $workspace.css('overflow-x') + "</span>"); $workspace.css('overflow-x', ''); $('div#output').html($('div#output').html() + "<span>Old overflow value: " + $workspace.css('overflow-x') + "</span>"); }); 

 #output span { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="s4-workspace">other tags</div> <div id="output"></div> 

Solution

The solution of setting the overflow value explicitly has been offered by ahoffner .
Another idea is to apply overflow via a CSS class. Then you can remove it with jQuery's removeClass() rather than manipulating the style directly:

 $(function () { var $workspace = $('#s4-workspace'), $output = $('#output'); $output.html("<span>Old overflow value: " + $workspace.css('overflow-x') + "</span>"); $workspace.removeClass('horizontal_scroll'); $output.html($output.html() + "<span>New overflow value: " + $workspace.css('overflow-x') + "</span>"); }); 

 #s4-workspace { left: 0; position: relative; } .horizontal_scroll { overflow-x:auto; } #output span { display:block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="s4-workspace" class="horizontal_scroll">other tags</div> <div id="output"></div> 

Incidentally:

Warning: one notable exception is that, for IE 8 and below, removing a shorthand property such as border or background will remove that style entirely from the element, regardless of what is set in a stylesheet or element.