切换移动导航时如何防止滚动

Question

我的移动导航用于使用HTML CSS和BS3进行的网站IM制造，这是非常基本的。但是我想在切换汉堡按钮时禁用身体的其余部分滚动。

我的问题是，当它打开时，您不能滚动，这就是我想要的。但是，当您切换菜单时，它不起作用。

HERES一些HTML：

  <!--        mobile nav links-->
              <div class="mob-div-nav">
                <div class="row">
                  <div class="col-xs-12" style="height:100%;">
                  </div>
                </div>
              </div>
      <!--        END Mobile Nav-->

这是JS：

  $("#hamburger").on("click", function (event){
  $(".mob-div-nav").slideToggle(500);
  function noscroll() {
  window.scrollTo( 0, 0 );
}
  // add listener to disable scroll
  if ($(".mob-div-nav").css("display") == "block"){
    window.addEventListener('scroll', noscroll);
    } else if ($(".mob-div-nav").css("display") == "none") {
      window.removeEventListener('scroll', noscroll);
    }
});

Answer 1

使用函数内部不外部的if语句。您的代码应该看起来像

$(document).ready(function(){
  // #hamburger click event
  $("#hamburger").on("click", function (event){
    $(".mob-div-nav").slideToggle(500);
  }); // End of #hamburger click event
  // window scroll event
  $(window).on('scroll' , noscroll);
});
// functions here
// noscroll function
function noscroll() {
  if ($(".mob-div-nav").is(':visible')){
    window.scrollTo( 0, 0 );
  }
}

说明：

• $(document).ready(function(){-当文档准备就绪时，请阅读
• window.addEventListener是纯JavaScript，$(window).on('scroll'是jQuery .. jQuery .on（）;vs javascript .addeventListener（）;
• .is(':visible')是一个jQuery函数检查元素是否可见， :hidden如果隐藏了元素，则:checked如果已检查等等。