javascript - 点击按钮，html的overflow-y变为隐藏，如果再次点击，又恢复可见

Question

我正在尝试做这件事:我希望当单击按钮时，我的 html 的溢出将被隐藏。然后，当再次单击时，它变得可见，依此类推。到目前为止，我已经这样做了:(按钮有 id #plus)

$('#plus').click(function () {
   $("html").css({
      'overflow-y': 'hidden',
   });
});

当然，它只能运行一次。我怎样才能把它转回来？

Answer 1

$('#plus').click(function () {
   var overflowY = 'hidden'; 
   if($("html").css('overflow-y') == 'hidden') overflowY = 'visible';
   $("html").css({ 'overflow-y': overflowY });
});

html, body {
  height:200%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="plus">Change Overflow Y</button>