javascript - divがxの量だけスクロールできるようにしますが、停止しますか？

Question

私は700pxの高さのdivを持っています、そのdivの下には200pxの画像があります。最初の700pxのスクロールを許可したいのですが、それ以上は許可しません。したがって、垂直解像度が小さい場合、ユーザーはスクロールして最初の700ピクセルを表示できますが、残りは「切り取られ」ます。

一方、垂直解像度が大きいユーザーには、700pxdivと画像がすべてスクロールバーなしで表示されます。

どのようにそれを行うことができますか？

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;
    }
}