空白：nowrap 效果不佳，我做错了什么？

Question

我制作了一个响应式网页，其中最大宽度为 768 像素（通过媒体查询），主容器内的 div 假设更改为 inline-block，以便当用户单击链接时页面将水平滚动到 div 的 id。该页面设置了溢出：隐藏，因此它仅使用 id/anchor 进行导航。

问题是，当我在移动设备中进行预览时，容器刚刚展开，我可以完全滑动页面。甚至假设在视口中心的菜单按钮也进入了容器的中心。并在其下方留下巨大的空白。但是在桌面浏览器中它做得很好。所以我认为它与 nowrap 函数有关。

它在移动版和桌面版的 Firefox 中都可以使用。它在IE桌面上工作。它不适用于 Chrome 移动设备，但似乎可以在桌面设备中使用。并且在 Safari 移动端失败，尚未在桌面端测试。

我试图删除 white-space: nowrap 函数只是为了发现 div 没有像它假设的那样堆叠 inline-block。我尝试了指定容器的宽度和最小宽度，但没有成功。我试过float:left，位置值和一堆我不记得的东西。没什么变化。

HTML

<div id="container">
  <div id="company" class="company">
    <iframe src="main.html">
    </iframe>
  </div>
  <div id="content" class="content">
    <iframe src="content.html">
    </iframe>
  </div>
  <div id="system" class="system">
    <iframe src="system.html">
    </iframe>
  </div>
</div>

css

body{
  overflow: hidden;
}
#container {
  height: 100vh !important;
  min-height: 100vh !important;
}
#container .company, #container .content, #container .system {
  display: block;
  height: 100vh !important;
  min-height: 100vh !important;
}
@media screen and (max-width:768px) {
  #container {
    display: block;
    white-space: nowrap;
  }
  #container .company, #container .content, #container .system {
  display: inline-block;
  }
}
iframe {
  width: 100vw !important;
  min-width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  border: none;
}

我所期望的（Chrome 桌面版） https://kamalmasrun.files.wordpress.com/2019/01/desktop.jpg

但只在移动设备上出现 https://kamalmasrun.files.wordpress.com/2019/01/screenshot_20190122-120510.png

非常感谢您的帮助，我首先感谢大家的帮助 =)。

Answer 1

基本上，这里有几个问题：

1. 设置overflow: hidden 不会阻止移动浏览器滚动（在 Firefox 上可能会，但在 Chrome 或 iOS Safari 上不会）。老实说，在移动设备上阻止滚动是一件很难做到的事情，而且总是有点 hacky，所以我不会那样做。
2. 要使用带有#content 等的链接实现滚动（或跳跃），必须展开主体，并且浏览器必须查看该元素的位置。扩展正文将导致用户能够向左/向右滚动，正如我之前提到的，这很难阻止。您必须滚动 #container 才能显示新元素。您可以使用 javascript 来做到这一点。

另外，不要忘记将overflow: hidden 添加到#container（这将适用于移动设备）。

如果仍有不清楚的地方，请随时在此答案下方的 cmets 中提问 :)

实现目标的算法思路：

1. 收听hashchange事件
2. 从window.location读取当前哈希
3. 使用document.querySelector 查找具有给定哈希的元素
4. 读取元素在容器内的位置
5. 将容器的scrollLeft属性设置为等于元素的位置

一些有用的链接可以帮助您入门：

• https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange
• https://developer.mozilla.org/en-US/docs/Web/API/Window/location
• https://developer.mozilla.org/pl/docs/Web/API/Document/querySelector
• https://developer.mozilla.org/pl/docs/Web/API/Element/getBoundingClientRect
• https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft

并更新了 CSS：

body {
  overflow: hidden;
  margin: 0;
}

#button {
  position: fixed;
  vertical-align: center;
}

#button .btn1,
.btn2,
.btn3 {
  padding: 10px;
  display: inline-block;
}

#container .company,
.content,
.system {
  display: block;
  height: 100vh;
  min-height: 100vh;
  width: 100vw;
}

@media screen and (max-width:768px) {
  #container {
    display: flex;
    flex-flow: row nowrap;
  }
  #container .company,
  .content,
  .system {
    display: block;
  }
}


iframe {
  border: none;
  height: 100vh;
  min-height: 100vh;
  width: 100vw;
}

Answer 2

将最小/最大宽度设置为#container 可能会解决问题。

#container {
    min-width: 100vw;
    max-width: 100vw;
}

另外，我建议在这里使用 flex，因为它很适合并且更现代。