Question

目前我有一个通过点击启动的叠加边栏。点击后，它还会将no-scroll类添加到正文以防止正文滚动，并通过CSS使用overflow:hidden进行控制。

我试过了：

$('.toggle-menu').click(function() {
    $('.sidebar-outer').toggleClass('open');
    $('body').toggleClass('no-scroll');
});

这是CSS：

body.no-scroll {
    overflow: hidden;
}

叠加边栏工作正常，因此使用其CSS。我的问题是，一旦点击切换，身体被拉伸，取得滚动条的宽度。

如何防止身体滚动而不会导致身体伸展？

Answer 1

使用jquery，您可以计算scroll bar width，然后将结果显示为body right margin，请参阅示例：

var menuwidth = $('.toggle-menu').innerWidth();
var menunoscrollwidth = $('.toggle-menu')[0]['clientWidth'];


$('.toggle-menu').click(function() {
    var scrollwidh =menuwidth - menunoscrollwidth;
    alert(scrollwidh +' '+menuwidth+' '+menunoscrollwidth);
    $('.sidebar-outer').toggleClass('open');
    if($('body').hasClass('no-scroll')){
      $('body').css('margin-right',0);
    }else{$('body').css('margin-right',scrollwidh);}
    $('body').toggleClass('no-scroll');
    
});

body
{
  background-color:blue;
  margin:0px;
}
.container
{
width:100%;
background-color:#ccc
}
div.toggle-menu {
  width:200px;
  height:900px;
  overflow:scroll;
}
div p {
  
    height:1200px;
}
body.no-scroll {
    overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="toggle-menu">
<p>This is the scrolled div .........</p>
</div>
</div>
</body>

ToggleClass“no-scroll”导致body伸展到滚动条的宽度

1 个答案: