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

Question

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

另一方面，垂直分辨率较大的用户将看到 700 像素的 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;
    }
}