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

Question

我想使用 jQuery 删除 overflow-x 和 overflow-y。试了好几种方法，好像都不行：

这是我的代码：

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>

以下是我试过的方法：

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

如果我在任一方法后输出 overflow 属性，我发现它们的值没有变化。
请参阅下面的演示：

$(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

如何用 jQuery 删除 overflow？

Answer 1

您只需将它们设置为默认值 - visible:

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

Answer 2

说明

根据jQuery的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.

我在下面演示了这个问题——请注意 overflow 值没有变化：

$(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>

但是，空字符串将将 overflow 重置为其默认值 如果它是由 jQuery[=66= 设置的]:

$(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>

解决方案

显式设置overflow值的解决方案是。
另一个想法是通过 CSS class 应用 overflow。然后你可以用 jQuery 的 removeClass() 删除它而不是直接操作样式：

$(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>

顺便提一句：

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.

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

Remove overflow-x and overflow-y using jQuery

css

jquery

overflow

说明

解决方案