Mobile 空白区：nowrap工作不好，我做错了什么？

我制作了一个响应性的网页，其中主容器中的div的最大宽度为768px（通过媒体查询），假设它更改为inline block，这样当用户单击链接时，页面将水平滚动到div的id。页面设置为overflow:hidden，因此它仅使用id/anchor进行导航

问题是，当我在手机上进行预览时，容器刚好展开，我完全可以滑动页面。甚至应该位于视图端口中心的菜单按钮也转到了容器的中心。在下面留下一个巨大的空白。不过，它在桌面浏览器中表现不错。所以我认为它与nowrap函数有关

它在Firefox手机和桌面上都能正常工作。它在桌面上工作。它在Chrome mobile中不起作用，但似乎在桌面上起作用。在Safari mobile中失败，但尚未在桌面上测试

我试图删除空白：nowrap函数，结果发现div没有像它想象的那样堆叠内联块。我尝试了指定容器的宽度和最小宽度，但没有成功。我试过浮动：左，位置值和一些我不记得的东西。什么都没变

HTML 我期望的（Chrome桌面）

但只有在手机上才能做到这一点

---

非常感谢您的帮助，我首先向所有帮助的人表示感谢=）。

将“最小/最大宽度”设置为“容器”可能会奏效

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

---

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

基本上，这里有一些问题：

设置

overflow:hidden

不会阻止手机上的浏览器滚动（在Firefox上可能会，但在Chrome或iOS Safari上不会）。老实说，在手机上阻止滚动是一件很难做到的事情，而且它总是有点黑，所以我不会这么做

要使用

#content

等链接实现滚动（或跳跃），主体必须展开，浏览器必须查看此元素的位置。扩展body将导致用户能够向左/向右滚动，正如我前面提到的，这很难阻止。您必须滚动

#container

以显示新元素。您可以使用javascript实现这一点

另外，不要忘记将

溢出：隐藏
添加到
#容器中（这在移动设备上适用）

如果还有什么不清楚的地方，请在下面的评论中提问：）

实现目标的算法思想：

收听
hashchange
事件
从
窗口读取当前哈希。位置

使用
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;
}

谢谢你的快速回答。不幸的是，它也不起作用。但我会像你建议的那样尝试flex，稍后我会发布更新。非常感谢您的帮助=）。更新：flex也不起作用。我用clip:rect试试运气，结果一样（只是更奇怪）。唯一的一件事，使菜单去中心视口和元禁用收缩和缩放功能是当我设置溢出隐藏在容器中。缺点是，锚不起作用。该页不会滑到下一页。我迷失了方向，失去了动力（.你能用这个例子创建一些JSFIDLE吗？然后我就可以试着解决它了Hi Piotr，很抱歉这么晚才回复，一直在为JSFIDLE=d而挣扎。这里是我能想到的最好的方法，因为我一直在muse开发这个web，键入代码对我来说是一个噩梦。但是，我很高兴学到一些新东西。这是链接。这是however没有滑动到div id而是跳转，我可以看到flex:nowrap没有包含内联块…嗯…当我收缩浏览器时内联。我应该让这更容易让你看到，但我不知道我在做什么，我很抱歉。我已经深入研究了这个问题。我现在的答案太长，无法作为评论发布在这里，所以请看看我的新答案。嗨，Piotr，谢谢你详尽的回复，很抱歉回复太晚。最近我一直在为我的健康问题而挣扎。我已经研究了你的建议，如果我知道如何执行它，我可能会从中得到一些想法=D。不过，我会尽我最大的努力解决这个问题。你是最棒的。再次感谢你=）.Hi Piotr，很抱歉回答了这么长的时间，我一直在为那些代码苦苦挣扎。我自己做不到（真丢脸），所以我一直在上下搜索，直到我找到了这个
if（window.location.href.indexOf（“#anchorname”）！=-1{window.onload=function（event）{window.location.hash=“#anchorname”}
。它跳转到所说的锚，没有滚动（我现在非常绝望），很好，它工作了！但是它取消了我屏幕上的另一个java函数。我必须删除它并使用其他函数。我发现
overflow-x:auto
也工作得很好，但它似乎不适用于
滚动捕捉类型
嘿，你能给我看看你的最新代码吗？也许我可以找到一种方法来快速改进它（即添加滚动而不是跳转和一些重构）嗨，Piotr，我在花了数小时的研发之后成功地使用了
滚动快照类型
，虽然没有自动滚动那么好，但现在还可以。Firefox mobile中的一些问题，可能还有Edge中的一些问题，但我会尝试解决，稍后将其作为一个小的调整。但是，从我的主要计划开始，我会深入研究你的建议是自动滑动到内容。对于我之前发布的java代码，我没有改变css中的任何内容，只是简单地将代码粘贴到我的java代码片段中……但这是我的web链接，如果你想了解我在移动中面临的问题，请看一下。老实说，我已经崩溃了~
#container {
    min-width: 100vw;
    max-width: 100vw;
}

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;
}