jQuery问题:身体溢出vs身体边缘

时间:2017-08-03 17:36:21

标签: javascript jquery overflow margin

大家好日子!

当我点击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

问题是如果“$(”body“)。addClass(”body-overflow“);”最后,它不起作用,但如果它位于thimbnail单击函数的第一行,则不应用体边距。

1 个答案:

答案 0 :(得分:2)

在添加body-overflow类之前,尝试将滚动条宽度存储在变量中。 像:

$(".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");
});