javascript - 允许 div 滚动 x 数量但然后停止？

Question

我有一个 700px 高的 div，在那个 div 下是一个 200px 的图片。我想允许滚动前 700 像素，然后不再滚动。因此，在较小的垂直分辨率上，用户可以滚动查看前 700 像素，但其余部分被“切断”。

另一方面，大垂直分辨率的用户将看到 700px 的 div 和没有滚动条的图片。

怎么做到呢？

Answer 1

您可以使用 css 媒体查询在不同的窗口大小上使用不同的 css。

@media all and (min-width: 350px) and (min-height: 950px) {
    // css for a window size of 250px height and 750px width or higher
}

所以你想做这样的事情吗？

.content {
    height: 700px;
    width: 300px;
}

.main {
    height: 700px;
    width: 100%;
    background-color: red;
}

.pic {
    display: none;
    height: 200px;
    width: 100%;
    background-color: blue;
}

@media all and (min-height: 950px) {
    .content {
        height: 900px;
    }
    .pic {
        display: block;
    }
}