如何控制从页面上的特定点开始滚动显示的最小和最大数值？
我试图显示一个数字，当用户到达页面上的某个元素时，该数字开始增加，然后随着页面向下滚动到最大数字，该数字会增加，但如果以下情况，该数字也会减少回原始数字：他们向上滚动页面。
到目前为止，我只能使用“window.scrollY”使函数从 0 开始并在滚动时增加或减少。有没有办法设置最小值和最大值？或者有更优雅的解决方案吗？
使用此线程中的示例：增加/减少滚动变量
$("document").ready(function(){
$(window).scroll(function(){
let scrollValue = window.scrollY;
let num = $("#num");
num.html(scrollValue);
});
});
<span id="num"></span>
慕丝7291255浏览 97回答 3
3回答
-
catspeake
我不知道你到底想做什么。但是，我认为您可能想尝试一下：https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_APIIntersection Observer API 提供了一种异步观察目标元素与祖先元素或顶级文档视口相交变化的方法。 -
月关宝盒
让我给你一些提示：Element.scrollHeight返回任何元素的滚动高度。要获取整个页面的高度，请在根<html>或<body>元素上使用此方法。window.innerHeight返回视口（窗口）的高度。当用户滚动到页面底部时，该scrollY值将是html.scrollHeight - innerHeight因为scrollY是视口的顶部并且scrollHeight是视口的底部。剩下的就交给你了。祝你好运！ -
手掌心
我不完全知道这是否是您正在寻找的，但您也许可以将该变量映射到不同的比例？我发现了这个功能：const scale = (inputY, yRange, xRange) => { const [xMin, xMax] = xRange; const [yMin, yMax] = yRange; const percent = (inputY - yMin) / (yMax - yMin); const outputX = percent * (xMax - xMin) + xMin; return outputX;};因此，如果您的滚动变量范围是 0 - window.innerHeight 并且您希望它的范围在 0 到 10 之间，则可以使用scale(window.scrollY, [0, window.innerheight], [0, 10]). 这应该有效。
随时随地看视频慕课网APP
相关分类
JavaScript