试图在 Safari 中禁用滚动答案

【问题标题】：Trying to disable scroll in safari试图在 Safari 中禁用滚动
【发布时间】：2017-01-11 23:06:52
【问题描述】：

我需要在不滚动横向版本的情况下制作页面。页面高度为 100%。

我什么都试过了。在 Safari 中，我总是可以滚动下部区域。我得到了一个隐藏区域。

我无法隐藏底部栏。而且我不能降低高度。我不能让它小于320。浏览器会在页面底部创建一个额外的白色区域。

（另外，我不能用JS）

我会感谢任何人的回复。

附：截图中不是我的网站，只是为了展示一个效果

【问题讨论】：

我认为，如果您使用 100vh 以及将主体设置为溢出：隐藏，它可能会更好，而不是 100%；
抱歉，它不起作用。
恐怕没有js是做不到的。横向模式下的 iOS 在导航栏的文档高度顶部保留了几个像素。还要记住，在横向模式下加载页面会导致操作系统的导航已经可见，而更改为横向模式会导致没有导航的“全屏”视图。有一些解决方法，但到目前为止都需要 javascript。

标签： html ios css safari

【解决方案1】：

有几种方法可以实现这一点。首先，您可以简单地使用一个填满整个视口的表格，以便在切换方向时每个元素均匀分布。您也可以使用简单的 CSS 来解决这个问题，这样您将拥有更多控制权并能够利用媒体查询。

看到这个工作fiddle

首先，您希望将所有内容包装在填充整个视图的单个父容器中。这将防止内容存在于视图之外。

HTML

<div class="wrapper">
    <div class="menu">
        The Menu
    </div>
    <div class="hero">
        The Hero
    </div>
    <div class="head">
        Text
    </div>
    <div class="content">
        This is content.
    </div>
</div>

CSS

.wrapper {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

然后您可以从这里设置每个元素占据父容器的一定百分比，以便重新缩放会重新计算元素比例，而不是强制滚动。

.menu, .hero, .head, .content {
    position: absolute;
    left: 0;
    width: 100%;
}

.menu {
    top: 0;
    height: 10%;
    background: #eee;
}

.hero {
    top: 10%;
    height: 20%;
    background: #aee;
}

.head {
    top: 30%;
    height: 10%;
    background: #eae;
}

.content {
    top: 40%;
    height: 60%;
    background: #eea;
}

以这种方式实现它将使您能够随着视图大小的变化对每个元素的行为进行更多控制。

【讨论】：