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

Question

我正在尝试做这件事：我希望在单击按钮时隐藏 html 的 overflow-y。然后，再次单击时，它会变为可见，依此类推。到目前为止，我已经这样做了：（按钮有 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>

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

Click on button, overflow-y of html turns hidden, if click again, it turns back visible

javascript

click