Question

我正在寻找一种方法来阻止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也在滚动。我已经搜索并尝试了所有内容，但似乎没有任何工作。

Answer 1

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

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.
})

选择sidenav时阻止正文滚动

1 个答案: