我想在隐藏垂直滚动条时向主体添加左边距和右边距以隐藏宽度变化。
我有这段代码可以找到垂直滚动条的宽度：
var $outer = $('<div>').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'),
widthWithScroll = $('<div>').css({width: '100%'}).appendTo($outer).outerWidth();
$outer.remove();
var scrollbarwidth = 100 - widthWithScroll;
它为IE11，Chrome 45和Firefox 39（桌面）提供值“17”（以像素为单位）。
当我隐藏垂直滚动条时，所有元素（如图像）都向右跳跃17个像素，我想隐藏它。
我试过了：
document.body.style.marginRight = scrollbarwidth + "px";
$('body').css('margin-right', scrollbarwidth);
$(body).css("marginRight", scrollbarwidth + "px");
最后一个可能在某种程度上有问题，因为该功能的其他部分在启用时会停止工作。其他两个似乎也没有用，因为我没有看到任何保证金变化。
编辑1：为了更容易理解我将如何使用它，我想提一下它应该触发on on scroll函数，如下所示：
var check1 = false;
$(document).bind('scroll', function() {
if(check1 === false && $(window).scrollTop() >= $('#divscrolltester').offset().top + $('#divscrolltester').outerHeight() - window.innerHeight) {
check1 = true;
unloadScrollBars();
disableScroll();
var $outer = $('<div>').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'),
widthWithScroll = $('<div>').css({width: '100%'}).appendTo($outer).outerWidth();
$outer.remove();
var scrollbarwidth = 100 - widthWithScroll;
//document.body.style.paddingRight = scrollbarwidth + "px"; Temporary disabled.
//$('body').css('padding-right', scrollbarwidth); Temporary disabled.
//$(body).css("marginRight", scrollbarwidth + "px"); Temporary disabled.
setTimeout(function() {
enableScroll();
reloadScrollBars();
//document.body.style.paddingLeft = scrollbarwidth + "px"; Temporary disabled.
//$('body').css('padding-left', scrollbarwidth); Temporary disabled.
//$(body).css("marginLeft", scrollbarwidth + "px"); Temporary disabled.
}, 500);
}
});
编辑2：
这是一个小提琴，可以显示大多数js，html和css：https://jsfiddle.net/tfnwj7dj/10/。
我还没有通过代码添加css的更改，因为我仍在尝试解决问题。此外，滚动和滚动条应该在一秒钟内重新启用，但在某处似乎有错误，抱歉。
编辑3：
此时您可以使用以下信息：
document.body.style.paddingLeft = (scrollbarwidth) + "px";
$('body').css('padding-left', scrollbarwidth);
document.body.style.paddingRight = (scrollbarwidth) + "px";
$('body').css('padding-right', scrollbarwidth);
document.body.style.marginLeft = (scrollbarwidth) + "px";
$('body').css('margin-left', scrollbarwidth);
document.body.style.marginRight = (scrollbarwidth) + "px";
$('body').css('margin-right', scrollbarwidth);
如果你有同样的问题，也许你有足够的信息来解决它，但不幸的是，这对我来说还不够。知道我的内容以宽度/最大宽度为500px为中心并且我实际上没有身体类可能是重要的信息。也许在宽度=“100％”的设计或具有绝对定位的元素上，线条可能就足够了。
欢迎使用javascript和jquery解决方案。
编辑4：
我终于根据自己的情况解决了这个问题 - 请随时阅读下面的答案。它可以防止元素在隐藏垂直滚动条时跳转，并且通过一些修补，它可能适用于身体类或其他情况。
答案 0 :(得分：1)
你的滚动条宽度是整数吗？试试这个
var scrollbarwidth = 100;
$('body').css('margin-right', scrollbarwidth);
也许你在滚动条宽度上有错误的值？在我的ff中，这段代码可以工作。
答案 1 :(得分：1)
我设法解决了 - 我想澄清我的css实际上不包含一个body类，并且我只是将所有元素集中在宽度/最大宽度为500px和margin-left / right auto
对于我和其他类似的案例，这里是答案：
/* First 5 lines for finding the scrollbar width. */
var $outer = $('<div>').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'),
widthWithScroll = $('<div>').css({width: '100%'}).appendTo($outer).outerWidth();
$outer.remove();
var scrollbarwidth = 100 - widthWithScroll;
var scrollbarwidthadjustment = scrollbarwidth / 2; /* For centered elements, divide the scrollbar width by 2. */
var element = document.getElementById('element');
element.style.right = (scrollbarwidthadjustment) + "px";
当您重新启用垂直滚动条时，只需添加：
element.style.right = "0px";
此外，元素必须具有css位置，否则不会触发。以下是一个有效的CSS样式示例：
.examplestyle {
color: white;
position: relative;
margin-left: auto;
margin-right: auto;
max-width: 100%;
display: block;
}
编辑1：
要防止移动设备上出现一些难看的css错误，请添加以下行：
/* ... */
var scrollbarwidthadjustment = scrollbarwidth / 2;
var windowWidth = $(window).width(); /* Get current window width on click/scroll etc. */
var window1 = windowWidth + scrollbarwidth; /* Window width + scrollbar width. */
var element = document.getElementById('element');
if(window1 >= widthofelement) {element.style.right = (scrollbarwidthadjustment) + "px";}
else {}
编辑2：
修复了尺寸小于原始尺寸的图片：
var offsetwidth = element.offsetWidth;
var widthadjustment = offsetwidth - scrollbarwidth; /* Get full width of image when scrollbar hidden, and then remove the scrollbar width. */
if(window1 < widthofelement && scrollbarwidth > 0) {
element.style.width = widthadjustment + "px";
element.style.right = (scrollbarwidthadjustment) + "px";
}
然后再次显示Y滚动条时的代码：
if(window1 < widthofelement && scrollbarwidth > 0) {
element.style.width = "OriginalSizepx";
element.style.right = "0px";
}
如果您想使用我添加的每个编辑，请输入完整代码：
/* First 5 lines for finding the scrollbar width. */
var $outer = $('<div>').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'),
widthWithScroll = $('<div>').css({width: '100%'}).appendTo($outer).outerWidth();
$outer.remove();
var scrollbarwidth = 100 - widthWithScroll;
var scrollbarwidthadjustment = scrollbarwidth / 2; /* For centered elements, divide the scrollbar width by 2. */
var element = document.getElementById('element'); /* Put element ID into a variable for easier use, and consecutive uses without re-identifying it. */
var window1 = windowWidth + scrollbarwidth; /* Window width + scrollbar width. */
var offsetwidth = element.offsetWidth; /* Get exact element size in current window. Shows shown dimensions when the window is resized. */
var widthadjustment = offsetwidth - scrollbarwidth; /* Get full width of image when scrollbar hidden, and then remove the scrollbar width. */
if(window1 >= widthofelement) {element.style.right = (scrollbarwidthadjustment) + "px";} /* If current window is equal to or greater than element width... */
if(window1 < widthofelement && scrollbarwidth > 0) { /* If current windows is smaller than the element width, and the window has a scrollbar greater than 0 pixels in width. */
element.style.width = widthadjustment + "px";
element.style.right = (scrollbarwidthadjustment) + "px";
}
/* When re-enabling the Y-scrollbar again; */
if(window1 >= widthofelement) {element.style.right = "0px";}
if(window1 < widthofelement && scrollbarwidth > 0) {
element.style.width = "OriginalSizepx";
element.style.right = "0px";
}
为了进一步说明，当您隐藏垂直滚动条时，此代码将阻止元素跳转到右侧。
答案 2 :(得分：0)
padding是你的答案。只需将margin更改为该内容即可。
项目移动是因为您更改了默认的margin主体，因此整个主体向左移动（如果我们正在修改margin-right）。
如果您删除滚动条，默认margin将紧随其后，然后您需要＆＃34;缓冲＆＃34;其余部分，保证金的左边，以及padding的作用。
我真的很喜欢使用检测工具Chrome耗材（ Ctrl + Shift + I ）然后在Styles右侧的标签向下扫描，直到您看到测量结果。它真的有助于理解CSS盒子模型。
答案 3 :(得分：0)
你在这里添加'px'..
$('body').css('margin-right', scrollbarwidth+'px')??
刚才我在w3schools尝试过。如果你在上面的语法中添加'px'，它对我有用。