Remove overflow-x and overflow-y using jQuery

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

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.

Answer 2

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');