首页 > 解决方案 > 防止重叠滚动

问题描述

我的应用程序存在设计问题,正文滚动浏览我的导航和命令行,我不知道如何解决。我不是在寻找正文文本在下方流动的 z-index 修复程序,我想将 lorem ipsum 填充文本上部滚动限制在命令栏下方。正文很大,需要滚动。目前它看起来像这样:

在此处输入图像描述 导航栏 CSS:

position: fixed;
width: 100%;
top: 0;

命令行:

margin-bottom: 60px;

主体:

position: relative;
min-height: 1px;
padding-left: 8px;
padding-right: 8px;
box-sizing: border-box;
float: left;

我正在使用微软的 ui-fabric 网格系统,如有必要可以发布更多代码。但我希望会有一个简单的“在距离顶部 x 像素处为此 div 设置垂直滚动断点” - 或类似的东西。但我似乎找不到任何东西。

我想我不太了解这一点,所以如果有人可以解释如何解决这个滚动问题的大局,那将会很有帮助。

标签: cssscrollcss-position

解决方案


要从正文上的偏移量开始,只需给它一个与导航栏高度相同的 margin-top,即

margin-top: 50px;

这将在开始之前为您的身体提供一个初始间距,在用户开始滚动之后它会


推荐阅读