ToggleClass「無滾動」導致身體伸展到滾動條寬度的數量

-1

目前我有一個覆蓋側邊欄，通過點擊啓動。一旦點擊，它也會將no-scroll類添加到身體，以防止身體滾動，並通過CSS控制overflow:hidden。ToggleClass「無滾動」導致身體伸展到滾動條寬度的數量

我想：

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

而這裏的CSS：

body.no-scroll { 
    overflow: hidden; 
}

疊加側邊欄工作得很好，並因此與它的CSS。我的問題是，一旦點擊切換，身體被拉伸，需要滾動條的寬度。

如何防止身體滾動而不會導致身體伸展？

來源

2017-11-18 Biyan

@ M0ns1f你甚至不讀？ – Biyan

對不起，但現在我知道問題 – M0ns1f

使用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>

來源

2017-11-18 15:56:36 M0ns1f

謝謝。我修改了一下代碼並使用了下面的變量：'var scrollWidth = window.innerWidth - $（document）.width（）;'。還有一個問題，即使在關閉切換之後，保證金權利仍然存在。 – Biyan

@Biyan看到答案，我已經添加了一個如果要檢查課程是否在正文上滾動否則刪除邊距，並將其標記爲答案並給它一個upvote：） – M0ns1f

完美。我的聲望低於15，我不能投票。但非常感謝你的幫助。 – Biyan

ToggleClass「無滾動」導致身體伸展到滾動條寬度的數量

回答

相關問題