2

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?

2 Answers 2

4

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');
1
  • I have tried setting it to just the quotes to unset it but it didn't work. This worked for me. Mar 4, 2021 at 13:30
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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