HTML

Question

我制作了一个响应式网页，其中最大宽度为768px（通过媒体查询），主容器内的div应该更改为内联块，以便当用户单击链接时页面可以水平滚动到div的id。该页面设置为“溢出：隐藏”，因此仅使用ID /锚即可导航。

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

它在Firefox移动版和台式机上均可使用。它适用于I.E桌面。它不适用于Chrome移动版，但似乎适用于台式机。并且在Safari移动版中失败了，尚未在桌面上进行测试。

我试图删除空格：nowrap函数只是为了发现div没有像预期的那样堆叠内联块。我没有运气尝试指定的容器的宽度和最小宽度。我尝试了float：左，位置值和很多其他东西，我都不记得了。没什么改变。

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

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

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

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

Answer 2

基本上，您在这里遇到一些问题：

设置overflow: hidden不会阻止移动设备上的浏览器滚动（在Firefox上可能会滚动，但在Chrome或iOS Safari上不会滚动）。老实说，在移动设备上阻止滚动是一件很难的事，而且总是有点棘手，所以我不会那样做。
要使用#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;
}

空白：nowrap运作不佳，我做错了什么？

HTML

css

2 个答案: