Javascript 如何在模式窗口弹出窗口中隐藏滚动条

因此，我正在研究一些新的web语言，到目前为止，我得出了以下结论：

如果单击其中一张图片，将显示一个没有滚动条的窗口。太完美了！正是我所需要的；但是，如果在单击它时仔细观察，当我将滚动条隐藏在主体上时，它后面的项目会稍微移动

我怎样才能只在弹出窗口上隐藏它？就像弹出窗口位于滚动条的顶部一样。当窗口打开时，停止其后面的图像调整大小

我试过：

.show::-webkit-scrollbar-track {
    visibility:hidden;
}

然而，这似乎没有任何作用。。。窗口将使用jQuery onclick事件打开：

$(".wrapper").click(function(){
        $(this).next(".hidden").addClass("show");
        $(".wrapper").addClass("blurry");
        $("body").css("overflow","hidden");
    }); 

    $(".close").click(function(){
        $(".hidden").removeClass("show");
        $(".wrapper").removeClass("blurry");
        $("body").css("overflow","auto");
    });

如果有什么不合理的地方道歉：） （要关闭弹出窗口，请单击绿色小框…x3）

---

jsiddle链接供您使用：同样，绿色按钮关闭弹出窗口。

将代码中的第1行替换为第2行，并确保超时与当前0.5s的过渡时间同步

You can calculate the width of the scrollbar by calling $('body').width() method before and after hiding the scrollbar.

Then apply right margin of the body with the scrollbar width;

Try,

var curBodyWidth = $('body').width();
$('body').css('overflow', 'hidden')
var scrollWidth = $('body').width() - curBodyWidth;

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

1)$("body").css("overflow","hidden");
2)setTimeout(function(){$("body").css("overflow","hidden");}, 500);

---

请尝试以下解决方案：

var widht = $('body').width();
$('body').css('overflow', 'hidden')
var scrollWidth = $('body').width() - width;

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

检查下面的小提琴

---

只需在bootstrap.css（bs3.3）的第5733行将

自动更改为
隐藏

我认为删除这一行将有助于
$（“body”）.css（“溢出”、“隐藏”）$css（“溢出”、“自动”）否则你需要为我们提供一把小提琴。如果我删除它，弹出窗口也会有滚动条。。。这就是我想要避免的。。。我将尝试设置一个JSFIDLE。您尝试过这个吗？。在包装器元素上放置一个样式，并将溢出隐藏。我这样做了，但不起作用：（我用JSFIDLE更新了上面的问题。还增加了滚动条的宽度，使其更加明显。这个解决方案的问题是它不能与css动画完全同步。因此它仍然不平滑。当然是目前为止最好的解决方案！
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: hidden;/*hidden to hide browser scrollbar*/
}