防止在选择侧边导航时滚动正文

我正在寻找一种方法来防止body在显示sidenav时滚动。我创建了一个覆盖div并使用jQuery对其进行控制。

HTML/CSS：

<div id="_blocker"></div>

<style>
#_blocker
{
/* Do not display it on entry */
 display: none;
 overflow: hidden;
 z-index:998;
 /* make it cover the whole screen */
 position: fixed;
 top: 0%;
 left: 0%;
 width: 100%;
 height: 100%;
 background :rgb(0,0,0);
 opacity: 0;
 transition-delay: 2s;
 -webkit-transition: opacity 1s ease-in-out;
 -moz-transition: opacity 1s ease-in-out;
 transition: opacity 1s ease-in-out;}
 </style>

JQuery：

function func(){
  $("#sidebar_container").css({"transform": "translate3d(-102%, 0px, 0px)"});
  $('#_blocker').css({'display':'none',"opacity":"0"});
}
$('.menu_btn').on('click',function(){
  $('#sidebar_container').css({"transform": "translate3d(0px, 0px, 0px)"});
  $('#_blocker').css({'display':'block',"opacity":"0.4"});
});
$('#_blocker').on('click',function(){
  func();
});

覆盖层隐藏了body，sidenav在滚动，问题是body也在滚动。我已经搜索并尝试了所有方法，但似乎没有任何效果。

要禁用任何元素的垂直滚动，请使用：

yourSelector {
  overflow-y: hidden;
}

要重新启用它，请使用 overflow-y: auto; 。

在您的情况下，yourSelector是body。您有两种选择：

a(清洁方式：使用类

加

body.noScroll {overflow-y:hidden;}

到你的CSS并使用jQuery在<body>上切换这个类。

$('body').toggleClass('noScroll');

b(肮脏的方式：即时应用CSS

$('body').css({
  overflowY:'hidden'  // overflowY:'auto' to re-enable scroll.
})

相关内容

最新更新

热门标签：