Javascript jQuery问题:正文溢出与正文边距
大家好 当我点击一个div时,我希望主体的溢出被隐藏,并在主体上添加一个滚动条宽度的右边距。以下是我的jQuery:Javascript jQuery问题:正文溢出与正文边距,javascript,jquery,overflow,margin,Javascript,Jquery,Overflow,Margin,大家好 当我点击一个div时,我希望主体的溢出被隐藏,并在主体上添加一个滚动条宽度的右边距。以下是我的jQuery: var getScrollbarWidth = function () { var scrollElement = document.createElement("div"); // Create element scrollElement.addClass("scrollbar-element"); // Apply predefined style
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函数的第一行,则不会应用body margin。在添加
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");
});