代码之家 › 专栏 › 技术社区 › Alexander Prisazhny

jQuery问题:body overflow vs body margin

margin overflow jquery javascript

Alexander Prisazhny · 技术社区 · 8 年前

当我点击一个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 click函数的第一行,则不会应用主体边距。

1 回复 | 直到 8 年前

Maarten van Tjonger 8 年前

在添加之前,请尝试将滚动条宽度存储在变量中 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");
});

推荐文章

Mehmet Aslan · freertos堆栈不会溢出

7 月前

MaSc. H. · 当一切看起来都很好的时候,为什么这是堆缓冲区溢出?

1 年前

DCR · 防止用预标记包围的长行溢出

1 年前

PasswordMissing · gcc-fno堆栈保护器不工作,如何修复?

1 年前

TJream · MIPS中使用addu检测溢出

1 年前

hallo02 · Java Integer下溢/上溢是否在数学运算期间发生?

1 年前

AntonyCatcher · 如何在Javascript中通过控制台更改宽度和溢出?

2 年前

migo101 · 整数溢出就是那个恶魔吗?

3 年前

flyingbee · 如何只在一个div中创建滚动条

3 年前

Anna_B · 使用鼠标按下的持续时间进行滚动

3 年前