Question

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

如果单击其中一张图片，则会出现一个没有滚动条的窗口。哪个是完美的！正是我需要的;但是，如果你在点击它时仔细观察，它背后的物品会稍微移动，因为我正在隐藏身体上的滚动条。

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

我试过了：

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

检查以下小提琴

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

Answer 2

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 3

在代码中用第2行替换第1行，并确保超时与转换时间同步，现在是0.5秒。

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

Answer 4

只需在bootstrap.css（bs3.3）第5733行将auto更改为hidden

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

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

4 个答案: