jQueryの問題：ボディオーバーフローとボディマージン

Question

おはようございます！

divをクリックすると、ボディのオーバーフローが隠され、スクロールバー幅のボディに右余白が追加されます。ここに私のjQueryのです：

var getScrollbarWidth = function() { 
    var scrollElement = document.createElement("div"); // Create element 
    scrollElement.addClass("scrollbar-element"); // Apply predefined style 

    document.body.appendChild(scrollElement); // Add element to page 
    var scrollbarWidth = scrollElement.offsetWidth - scrollElement.clientWidth; // Subtract width without scrollbar from width with scrollbar 
    document.body.removeChild(scrollElement); // Remove element from page 
    return scrollbarWidth; 
    };  

$(".thumbnail").on("click", function() { 
    $(".project-wrap").addClass("project-open"); 
    $("body").attr("margin-right", getScrollbarWidth() + "px"); 
    $(".project-button").attr("margin-right", getScrollbarWidth() + "px"); 
    $("body").addClass("body-overflow"); 
    } 

とCSS：

.body-overflow 
    overflow: hidden !important 
.project-open 
    display: block !important 

問題があれば、 "$（" 身体 "）addClass（" ボディ・オーバーフロー "）ということです。"それは動作しませんが、それがthimbnailクリック機能の最初の行にある場合は、ボディマージンは適用されません。

Answer 1

body-overflowクラスを追加する前に、スクロールバーの幅を変数に格納してみます。 Like：

$(".thumbnail").on("click", function() { 
    var scrollbarWidth = getScrollbarWidth(); 

    $("body").addClass("body-overflow"); 
    $("body").attr("margin-right", scrollbarWidth + "px"); 
    $(".project-wrap").addClass("project-open"); 
    $(".project-button").attr("margin-right", scrollbarWidth + "px"); 
});