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

Question

所以我正在尝试一些新的网络语言，到目前为止，我想出了这个:

http://jsfiddle.net/lustre/j9LwghLr/

如果单击其中一张图片，则会出现一个没有滚动条的窗口。这是完美的!正是我所需要的；但是，如果您在单击它时仔细观察，它后面的项目会稍微移动，因为我将滚动条隐藏在正文上。

如何仅将其隐藏在弹出窗口上？就好像弹出窗口位于滚动条的顶部一样。当窗口打开时停止其后面的图像调整大小。

我已经尝试过:

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

供您使用的jsFiddle链接:http://jsfiddle.net/lustre/j9LwghLr/再次，绿色按钮关闭弹出窗口。

Answer 1

尝试以下解决方案:

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

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

检查以下 fiddle

http://jsfiddle.net/j9LwghLr/4/