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

Question

我制作了一个响应式网页，其中最大宽度为 768px（通过媒体查询），主容器内的 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

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

score 1 · Accepted Answer

基本上，你有几个问题：

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

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

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

实现目标的算法思想：

听hashchange事件
从window.location
使用给定哈希查找元素document.querySelector
读取元素在容器内的位置
将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;
}

score 0 · Accepted Answer

将最小/最大宽度设置为#container 可能会起到作用。

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

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

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

HTML

css

2 回答 2

Related

Reference