我制作了一个响应网页，其中主容器内的div最大宽度为768px(通过媒体查询)，假设更改为内联块，这样当用户单击链接时，页面将水平滚动到div的id。页面设置为overflow：hidden，因此仅使用id/anchor进行导航。
问题是，当我在手机上预览时，容器刚刚展开，我完全可以滑动页面。甚至假设位于视图端口中心的菜单按钮也转到了容器的中心。在它下面留下了一个巨大的空白。然而，它在桌面浏览器中表现不错。所以我认为这一切都与nowrap函数有关。
它适用于Firefox的手机和桌面。它在IE桌面上工作。它在Chrome手机上不起作用，但似乎在桌面上起作用。在Safari手机中失败，尚未在桌面上进行测试。
我试图删除white-space:nowrap函数，结果发现div并没有像它想象的那样堆叠内联块。我尝试指定容器的宽度和最小宽度，但没有成功。我试过浮动：左边，位置值和一些我不记得的东西。没有什么变化。
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
非常感谢您的帮助，我首先对大家的帮助表示感谢。
基本上，这里有一些问题：
- 设置
overflow: hidden不会阻止移动设备上的浏览器滚动(在Firefox上可能会，但在Chrome或iOS Safari上不会)。老实说，在手机上阻止滚动是一件很难做到的事情，而且它总是有点过时，所以我不会这么做 - 要使用
#content等链接实现滚动(或跳跃)，必须展开主体，浏览器必须看到这个元素在哪里。展开主体将导致用户能够向左/向右滚动，这很难阻止，正如我之前提到的。您必须滚动#container才能显示新元素。您可以使用javascript来完成此操作
另外，不要忘记将overflow: hidden添加到#container(这将在移动设备上工作)。
如果还有什么不清楚的地方，可以在下面的评论中提问：)
算法实现您目标的想法：
- 收听
hashchange事件 - 从
window.location读取当前哈希 - 使用
document.querySelector查找具有给定哈希的元素 - 读取元素在容器内的位置
- 将容器的
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;
}
将最小/最大宽度设置为#container可能会成功。
#container {
min-width: 100vw;
max-width: 100vw;
}
此外，我建议在这里使用flex，因为它非常适合而且更现代。