Question

我有这个小问题。我有一个班级scroll的主要div。我有几个其他输入参数，我从用户那里获取输入。此输入垂直填充整个页面。

现在，我使用Chrome最小化按钮最小化屏幕。（即恢复按钮）。由于页面设置为overflow:scroll，页面会缩小并显示滚动条。

现在问题是它不会滚动直到页面结尾。假设有20个输入参数，当我最小化时，我只能向上滚动到第18个输入参数。滚动条不超过18并隐藏最后2个，因此观看者无法看到。

<div class="scroll">
</div>
<!-- Added this extra div below and now able to scroll the last 2 parameters as well -->
<div style="height:50px;">
</div>

.scroll {
height:100%;
overflow:scroll; 
}

如果我做错了，有人可以告诉我。

Answer 1

可能的原因：

使用margin-top: 100px时，top: 100px或height: 100%等垂直偏移量与position: absolute;相结合。在这种情况下，请更改为height: calc(100% - 100px);
与padding-top或padding-bottom相同。可能的解决方案：box-sizing: border-box;

但没有代码所有这一切都在猜测......

Answer 2

用height替换min-height应解决此问题。

改变这个：

.scroll {
    height:100%;
    overflow:scroll; 
}

对此：

.scroll {
    min-height:100%;
    overflow:scroll; 
}

Answer 3

不确定可能的原因是什么。但只是在常规div下面加一个额外的div解决了这个问题。现在我可以查看上面div中的所有项目。请查看问题本身的答案。如果他们想要有这样的解决方法，可能会帮助某人。

Answer 4

.scroll{
height: calc(100vh - 100%);
overflow-y: scroll;
}

Answer 5

如果上述解决方案不适合您，则可以在滚动条上添加负边距。不仅仅是实际的解决方案，但这确实为我完成了工作。

.scroll::-webkit-scrollbar-track{
        margin-top: -10px;
        margin-bottom: -10px;
}

Answer 6

有同样的问题。通过将overflow:hidden应用于直接父容器来解决此问题。

假设您要在其中应用滚动的容器中有一个部分。首先，确保为该节提供了容器overflow:hidden，然后继续将overflow:scroll应用于子节。

为我工作。

快乐编码：）

Answer 7

填充底部（带有滚动条的div）是您的朋友。

.scroll {
  height:100%;
  overflow:scroll; 
  padding-bottom: 5rem;
}

滚动条不会完全向下滚动页面

7 个答案: