如何在模态 window 弹出窗口中隐藏滚动条

Question

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

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

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

我试过：

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

然而这似乎没有任何作用... windows 使用 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");
    });

如果有什么不明白的地方，我们深表歉意:) （要关闭弹出窗口 window 单击绿色小框... x3 ）

jsFiddle link 供您试玩：http://jsfiddle.net/lustre/j9LwghLr/ 同样，绿色按钮关闭弹出窗口。

Answer 1

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

Answer 2

将代码中的第 1 行替换为第 2 行，并确保您的超时与现在为 0.5 秒的过渡时间同步。

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

Answer 3

尝试以下解决方案：

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/

Answer 4

只需在 bootstrap.css (bs3.3)

中的第 5733 行将 auto 更改为 hidden

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: hidden;/*hidden to hide browser scrollbar*/
}

如何在模态 window 弹出窗口中隐藏滚动条

How do I hide my scrollbar on my modal window popup

javascript

jquery

scrollbar