如何阻止用户在某个点滚动？ [关闭]答案

【问题标题】：How Do I Stop the User from Scrolling at a Certain Point? [closed]如何阻止用户在某个点滚动？ [关闭]
【发布时间】：2021-07-18 22:59:34
【问题描述】：

我一直在寻找一种可以运行很长时间的解决方案，但老实说，我尝试的一切都达不到要求。我已经建立了一个网站，并希望防止用户从顶部滚动超过 6200 像素（页面长约 8240 像素）。解释为什么我需要这方面的帮助会很长，但基本上，这是需要完成的一些拼凑工作。我了解 CSS 和 JS，但我的 JS 并不令人惊奇……我之前看到的很多答案都在 jQuery 中，这很好，但我很感激有关如何将它实现到我的 HTML 中的一些解释，因为我很友善编码游戏的新手。

任何帮助都会很棒！谢谢！

【问题讨论】：

当他们到达终点时会发生什么？阻止它们滚动？
你能在 HTML 中添加一些东西吗？
抱歉刚刚看到你的回复@AHaworth 和@MaartenDev！是的，我可以在我的 HTML 中添加一些东西，是的，问题是我有一种向上推动的
基调，因此它们都相互重叠，从而产生了一种很酷的分层效果。问题是现在页面底部有大量空白空间，我无法填充任何东西......因此我想阻止用户滚动过去一个点。我可以看到我是如何搞砸的，并且可以做得更好来创建相同的效果，但老实说，我只是想完成这个项目并继续我的下一个项目（以加深我对编码的理解）

标签： javascript html jquery css reactjs

【解决方案1】：

感知滚动事件并采取行动的问题在于，用户可能已经超过了 6200px 点，因为在滚动发生之前您不会被告知该事件。举个例子，想想平板电脑上的一个非常快速的内部滚动 - 手指疯狂地滑动以向下滚动。

所以我们需要确保如果他们真的射过去，他们什么都看不到。

我们可以做这些事情：

使用伪 div 隐藏 6200 像素以下的所有内容 - 不能阻止爱管闲事的用户使用浏览器开发工具查看下面的内容，但可以阻止人们意外看到那里的内容
在 6199 像素处种植一个 1 像素的 div，并在其上设置一个 intersectionObserver，以便我们知道用户何时进入危险区域并强制滚动至以显示最终视口的“允许”内容的价值。

function callback(entries) {
  if (entries[0].isIntersecting) {
    window.scrollTo({top: Number(6200 - window.innerHeight), left: 0, behavior: 'smooth'});
  }
}
  const observer = new IntersectionObserver(callback);
  observer.observe(document.querySelector('#sensor'));

body {
  position: relative;
}
.talldiv::after {
  height: calc(100% - 6200px);
  width: 100%;
  content: '';
  background-color: white;
  position: absolute;
  top: 6200px;
  left: 0px;
  z-index: 99999;
}
#sensor {
  position: absolute;
  width: 1px;
  height: 1px;
  left: 50%;
  top: 6199px;
}
.talldiv {
  width: 100vw;
  height: 8000px;
  background-image: linear-gradient(to bottom, red, purple, orange, yellow, green, blue, cyan, magenta, gray);
}

<div id="sensor"></div>
<div class="talldiv">SCOLL DOWN</div>

我原以为我们不应该再做任何事情了，但在笔记本电脑上，如果大块快速滚动，则可以“突破”并滚动超过 6200 像素。我需要添加一点来感知传感器何时离开视口顶部，而不仅仅是当它进入视口时。

【讨论】：

确实有效！太感谢了！再加上您的解决方案非常简单，而且非常有意义。
实际上对结果非常满意！再次感谢@AHaworth

【解决方案2】：

这里有一个小方法。根据 Dharman 的说法，您必须再次滚动一点到顶部，低于 6200 像素的所有内容都不是“可见的”。

$(document).ready(function(){
   $(window).scroll(function() {
    var top_of_element = $("#dont-show").offset().top;
    var bottom_of_element = $("#dont-show").offset().top + $("#dont-show").outerHeight();
    var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
    var top_of_screen = $(window).scrollTop();

    if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
        // the element is visible, do something
        console.log("visible");
        $(window).scrollTop(bottom_of_screen - bottom_of_element);
    } else {
        // the element is not visible, do something else
        console.log("not visible");
    }
  });
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Dont scroll below 6200p</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <div style="width:100%;height:100vh;background-color: blue;"></div>
  <div id="dont-show" style="width:100%;height:10vh;background-color: red;"></div>
</body>
</html>

您现在可以修改此源代码，以便在用户滚动到 6200 像素以下时向上查询窗口的偏移量并相应地滚动。

【讨论】：

感谢您的帮助！但我一直试图让它工作一个小时，老实说不能让它工作......关于让它工作的任何建议......感觉就像我错过了一些超级简单的东西，但它不起作用?

【解决方案3】：

您好，欢迎来到 Stackoverflow 社区！

为了防止用户滚动，您要么必须创建一个循环，以便在用户转到该特定点时将用户重定向到上部区域，要么您可以缩小页面或缩短页面。

【讨论】：

哇，感谢您的快速回复和有用的信息！