Javascript 滚动100vh后的块滚动顶部

我有一个顶部有一个100vh div的主页，当你在这个div后向下滚动时，我想隐藏它。或者在滚动这个100vh div后禁用向上滚动的可能性。这个div应该只在你到达网站时出现一次

链接如下： 在大的彩色背景div之后，您将无法向上滚动

在滚动窗口的高度后，我尝试在这个div中添加一个“display:none”属性，但它的效果是将所有内容向上移动。。。 如果有人对此有任何线索

这是要隐藏的div：

<div id="home-background" class="monobg">


<?php $images_toomany = array("/wp-content/img/toomany.svg", "/wp-
content/img/toomany_2.svg", "/wp-content/img/toomany_3.svg", "/wp-
content/img/toomany_4.svg", "/wp-content/img/toomany_5.svg");?>
<?php echo '<img src="'.$images_toomany[array_rand($images_toomany)].'" 
class="toomany" />';?>

<?php $images_pictures = array("/wp-content/img/pictures.svg", "/wp-
content/img/pictures_2.svg", "/wp-content/img/pictures_3.svg", "/wp-
content/img/pictures_4.svg", "/wp-content/img/pictures_5.svg",);?>
<?php echo '<img src="'.$images_pictures[array_rand($images_pictures)].'" 
class="pictures" />';?>


</div>

多谢各位

---

托马斯是的。超级简单。如果要防止滚动超出当前视口，只需将overflow:hidden添加到body元素中即可。您可以通过JS或jQuery动态执行此操作。

试试这个

$(window).scroll(function() {

    var div_height = $('#home-background').height();    
    var page_scroll = $(window).scrollTop();

    if(page_scroll > div_height) {
        $('#home-background').css('display', 'none');
    }
});

---

这里是我的代码和溢出技术。 我认为这是一个良好的开端：

jQuery(function($) {

var $nav = $('body');
var $win = $(window);
var winH = $win.height(); // Get the window height.

$win.on("scroll", function () {
    if ($(this).scrollTop() > winH ) {
        $nav.addClass("hide");
    } 
}).on("resize", function(){ // If the user resizes the window
   winH = $(this).height(); // you'll need the new height value
});

});

---

请发布您的代码，谢谢“寻求调试帮助的问题（“此代码为什么不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中复制所需的最短代码。没有明确问题说明的问题对其他读者没有用处”-只需使用div to hideIt的代码编辑我的帖子，例如，它允许通过箭头键滚动。我不确定我是否了解你。溢出：隐藏在主体上将防止通过键盘和鼠标滚动。谢谢回答。只要把它加到身体上，它就会反其道而行之。它只显示我要隐藏的主背景div，并隐藏页面的其余部分。它将锁定当前视口-因此，在滚动到要锁定滚动的点之前，您不会想应用它。只需在回答中发布我的JS代码，几乎在那里，我想谢谢您的回答。这种技术唯一的问题是它把所有的内容都拿走了，因为顶部的大div已经不存在了。