没有滚动条的启动画面答案

【问题标题】：Splash screen with no scrollbar没有滚动条的启动画面
【发布时间】：2014-03-20 19:40:12
【问题描述】：

几天前，我制作了一个简单的闪屏，目前已修复，并在用户单击按钮时设置一个 cookie（不再出现）。

基本上，它只是一个出现在页面主要内容前面的div。

我的问题是，即使启动画面使用了所有的宽度和高度，滚动条仍然出现。我一开始并不关心这个，因为它是position:fixed'd，并且内容总是在那里，无法上下滚动。

今天我看到在手机上，当你滚动时，有时你可以看到闪屏后面的内容。

所以主要问题是滚动条。因此我决定不惜一切代价隐藏滚动条。
但是overflow:hidden 不起作用。
如果我将position: relative 放在启动画面的父级上，它也不起作用。

如何禁用滚动？无论如何我可以用CSS做到这一点吗？我应该使用javascript来解决问题吗？

这是我的启动页面和主页的一个小技巧： http://jsfiddle.net/tomas2387/G8M4D/

如您所见，启动画面在前面，但滚动在那里，即使我使用overflow:hidden。

谢谢

【问题讨论】：

标签： html css

【解决方案1】：

添加：

html,body{
    overflow:hidden;
}

或者 - 根据您的具体目标，您可能需要添加：

html,body{
    padding:0;
    margin:0;
}

然后将 modal--mobile-splashpage 部分之后的所有内容包装在另一个元素中，并在显示启动画面时隐藏它。然后，您可以根据需要切换两者（启动画面和内容）。 See demo here

【讨论】：

【解决方案2】：

html,body{
    overflow:hidden;
}

当你隐藏启动画面时，只需使用 jquery 来返回滚动

$('html,body').css('overflow','auto');

【讨论】：

【解决方案3】：

试试这个：

body {
     overflow-y: scroll;
     position: fixed;
     width: 100%;
}

【讨论】：