Question

当我切换以下内容时，如何在整页上禁用滚动：

＆＃13;

$('#test').click(function() {
  $('html, body').css({
   overflow: 'hidden',
   height: '100%'
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>
  <input id="test" type="checkbox">
  
  <span class="menu">
    <span class="hamburger"></span>
  </span>

  <ul>
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</label>

＆＃13;

这似乎无法发挥作用。

Answer 1

我会分开CSS和javascript部分，并使用复选框的选中值来启用/禁用滚动：

$("#scrolltoggle").on("click", function(){
  if($(this).is(":checked")){
    $("body").addClass("noscroll");
  }else{
    $("body").removeClass('noscroll');
  }
});

.example {
  height: 400px;
  background: lightyellow;
}

.noscroll {
  overflow: hidden;
  background: lightgreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head></head>

<body>
  <div class='example'>
    <input type='checkbox' id='scrolltoggle'>Disable Scrolling
  </div>
</body>

切换后禁用滚动

1 个答案: