如何防止使用JavaScript或jQuery回滚？

我有一个网页，其中有一个完整的高度介绍图像。在这张图片的下面是网站的主体，上面有一个常规的网站标题，我试图创造一种效果，一旦用户向下滚动到网站标题，他们就无法向上滚动查看简介图片

CSS类：

主介绍图像：

.cq全屏介绍

站点标题：

.nav down

---

我在StackOverflow上做了一番探索，但我找不到任何解决这种情况的方法，有人能告诉我使用jQuery实现这一点的正确方向吗？

虽然它不会直接阻止您向上滚动，也不是jQuery，但我建议在元素不可见时删除/隐藏它

您可以获取相对于页面顶部的当前滚动位置，并检查其是否大于元素高度：

const target = document.getElementById('my-target')
const targetHeight = target.getBoundingClientRect().height

const scrollEventListener = () => {
    if (
      document.body.scrollTop > targetHeight ||
      document.documentElement.scrollTop > targetHeight
    ) {
        target.remove()
        window.removeEventListener('scroll', scrollEventListener)
        document.documentElement.scrollTop = 0
      }
  }

  window.addEventListener('scroll', scrollEventListener)

---

下面是一个代码笔

您可以像这样使用JQuery scrollTop函数

$(function() {
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
        // set the height in pixels
        if (scroll >= 200) {
         // after the scroll is greater than height then you can remove it or hide it
           $(".intro-image").hide();
        }
    });
});

因此，我个人认为与其滚动，不如让它成为可操作的。强制用户手动执行转换（以及所有状态之间的转换）是一个坏主意。如果用户滚动到一半，看到有可操作的东西（菜单、按钮、输入字段）可用吗？如果是，如果他们提交。。。非常尴尬。如果它不可用，他们如何知道它何时可用？他们怎么知道这是因为他们没有一直滚动。用户体验很差

在下面的示例中，我创建了一个伪screenport，让您了解实际情况。真实站点中的

.body

容器将是body元素

$（文档）.ready（函数（）{
$（'.splash screen'）。在（'click'，function（）上{
$（'.splash screen'）.addClass（“隐藏”）；
});
})

html，正文{
背景：#eee；
保证金：0；
填充：0；
}
.曲根{
显示器：flex；
对齐项目：居中；
证明内容：中心；
高度：100vh；
宽度：100vw；
}
.web容器{
宽度：640px；
高度：480px；
背景：#fff；
}
.身体{
字体大小：0；//这只是为了防止img标牌之间的间距
位置：相对位置；
}
.启动屏幕{
位置：绝对位置；
转换：转换1s轻松输入输出；
}
.splash screen.fa{
位置：绝对位置；
z指数：1；
字体大小：24px；
颜色：#fff；
左：50%；
底部：15px；
}
.splash-screen.is-hidden{
转化：translateY（-110%）；
转换：转换1s轻松输入输出；
}

我认为jQuery中没有内置的东西可以做到这一点，但您可以观察滚动事件，检查站点标题是否在窗口顶部，然后将“主介绍图像”更改为

显示：无

。从用户体验来看，阻止用户出于任何原因滚动是一个可怕的决定。作为一个用户，如果我不能向上滚动并且不知道为什么，我只能想象这将是多么令人沮丧。一般来说，用自己的浏览器覆盖默认浏览器行为几乎从来都不是一个好主意；您必须记住，并不是每个用户都在使用计算机、鼠标或与您的自定义实现配合良好的设备，等等。更不用说编程比第一次滚动时隐藏简介更困难。@TylerRoper我通常会同意，但我试图将这种效果与向下滚动将视口捕捉到主要网站内容的效果结合起来，这样，介绍屏幕和网站的其余部分就被清楚地分开了。@Van明白了-但是我不相信我的评论会被打折。当你按下页面，顶部/介绍不再可见后，为什么不完全隐藏它呢？此时用户将无法向上滚动，因为那里不再有任何内容。人们应该小心使用滚动/滚动这个词。它通常意味着用户能够垂直或水平移动内容。我想更好的描述应该是，如何显示

启动屏幕

并在屏幕外设置动画。谢谢，我会尝试一下的！）谢谢，我要试试这个！这非常有效，我唯一的问题是当

.remove（）

函数启动时，页面会跳转到被隐藏的

我的目标

div的高度。我在这里遗漏了什么吗？@van我可以想象，如果与浏览器相关，手动滚动top将修复此问题。看起来至少chrome足够聪明，可以计算出您当前的视图并调整滚动位置。可能某些浏览器没有，只是将页面滚动到当前的滚动位置，而当前的滚动位置是一个不同的视图，因为元素丢失。尝试在事件侦听器中的remove@van好的，现在我明白你的意思了。它与我在函数中更新的内容完全相关。问题是，当您使用鼠标触摸滚动条并向下滚动时，页面将跳转，因为滚动条会跳转。因此，要正确地执行此操作，必须确定用户是否在按下鼠标键，如果是，则必须进行一些位置计算和调整。我认为，甚至不可能对用户使用鼠标和滚动条而不是简单地滚动来执行此操作。我认为滚动条的位置总是相对于页面高度来计算的。实际上，您必须强制用户将鼠标移到不同的位置。我现在唯一能想象的是禁用滚动条，但这是一个糟糕的设计。