隐藏垂直滚动条时，使用javascript和局部变量避免元素右跳

我想在正文中添加左边距和右边距，以隐藏隐藏垂直滚动条时的宽度更改

我有一段代码可以找到垂直滚动条的宽度：

    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;

最后一个可能在某种程度上有故障，因为函数的其他部分在启用时停止工作。另外两个似乎也不起作用，因为我看不到任何利润变化

编辑1：为了更容易理解我将如何使用它，我想提到它应该在滚动功能上触发，如下所示：

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);

   }   
});

如果你有同样的问题，也许你有足够的信息来解决它，但不幸的是，这对我来说还不够。知道我的内容以宽度/最大宽度仅为500px为中心，并且我实际上没有body类，这可能很重要。也许在宽度为100%的设计上，或者在绝对定位的元素上，线条就足够了

javascript和jquery解决方案都受到欢迎

编辑4：

---

我终于根据自己的情况解决了这个问题——请随意阅读下面的答案。它可以防止隐藏垂直滚动条时元素跳转，如果稍加修改，它很可能适用于body类或其他情况。

您的滚动条宽度是整数吗？试试这个

var scrollbarwidth = 100;
$('body').css('margin-right', scrollbarwidth);

---

可能您在scrollbarwidth上的值错误？在我的ff中，这段代码是有效的。

正如Shikkediel所说，填充是你的答案。只要将
margin
更改为该值，它就会起作用

项目移动是因为您更改了默认的
页边距
正文，因此整个正文将向左移动（如果我们正在修改
页边距右
）

如果删除滚动条，默认的
边距将在其后面，然后需要“缓冲”边距左侧的其余部分，这就是
填充的作用

我非常喜欢使用检查工具Chrome supplies（Ctrl+Shift+I），然后在右侧的
Styles
选项卡中向下滚动，直到看到测量值。它确实有助于理解CSS框模型。
您是否在此处添加了“px”

$('body').css('margin-right', scrollbarwidth+'px')?? 

刚才我在学校里试过。如果在上面的语法中添加“px”，它对我很有用。
我设法解决了这个问题-我想澄清一下，我的css实际上不包含body类，我只是将所有元素居中，宽度/最大宽度为500px，边距为左/右自动

对于我和其他类似的案例，以下是答案：

    /* 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";

此外，元素必须声明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";
    }

var offsetwidth=element.offsetwidth；
变量宽度调整=偏移网络宽度-滚动条宽度；/*当滚动条隐藏时获取图像的全宽，然后删除滚动条宽度*/
如果（window10）{
element.style.width=宽度调整+px；
element.style.right=（滚动条宽度调整）+“px”；
}

当再次显示Y形滚动条时，出现以下代码：

    if(window1 < widthofelement && scrollbarwidth > 0) {
      element.style.width = "OriginalSizepx";
      element.style.right = "0px";
    }

if（window10）{
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";
    }

/*查找滚动条宽度的前5行*/
var$outer=$（''）.css（{visibility:'hidden'，width:100，overflow:'scroll'}）.appendTo（'body'），
widthWithScroll=$（''）.css（{width:'100%}）.appendTo（$outer.outerWidth（）；
$outer.remove（）；
var scrollbarwidth=100-带croll的宽度；
变量scrollbarwidthadjustment=scrollbarwidth/2；/*对于居中元素，将滚动条宽度除以2*/
var element=document.getElementById（'element'）；/*将元素ID放入变量中以便于使用，并在不重新标识的情况下连续使用*/
var window1=windowWidth+scrollbarwidth；/*窗口宽度+滚动条宽度*/
var offsetwidth=element.offsetwidth；/*获取当前窗口中的确切元素大小。调整窗口大小时显示显示的尺寸*/
变量宽度调整=偏移网络宽度-滚动条宽度；/*当滚动条隐藏时获取图像的全宽，然后删除滚动条宽度*/
如果（window1>=元素宽度）{element.style.right=（scrollbarwidthadjustment）+“px”}/*如果当前窗口等于或大于元素宽度*/
if（window10）{/*如果当前窗口小于元素宽度，并且窗口的滚动条宽度大于0像素*/
element.style.width=宽度调整+px；
element.style.right=（滚动条宽度调整）+“px”；
}
/*再次启用Y形滚动条时*/
如果（window1>=元素宽度）{element.style.right=“0px”；}
如果（window10）{
element.style.width=“OriginalSizepx”；
element.style.right=“0px”；
}

为了进一步说明，此代码将防止隐藏垂直滚动条时元素跳到右侧。
您是否尝试过
document.getElementById（“myDiv”）.style.marginLeft=（滚动条宽度）+“px”改为尝试填充（边距将对
正文产生“向内”效果），它可以工作@谢天谢地，我试试填充。我试图使用
$（'body'）.css（'padding-right'，scrollbarwidth）但是元素仍然跳到右边…我们可能需要对元素上设置的样式有更多的了解。。。当然，你也可以完全避免跳转：。删除了我发布的答案，但这是提琴，以防你想使用去抖动功能
    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";
    }

    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";
    }