JavaScript-获取滚动值并将其转换为动画元素 基本信息：

我有4个

部分

，每个

部分

高度=100vh。
以及一个

功能

，当达到

第2节

之前的半节高度时，将

True

打印到

控制台

，直到

第2节

底部到达页面的

顶部（这意味着在其上滚动）。


我正在努力实现的目标：
用jQuery设置
元素的动画如下：

x
将以1开始，以2结束，反之亦然，在10个步骤中，每个步骤为0.1

因此，我必须将从开始到结束滚动（数字）的
高度
转换为10步，每滚动
1/10
，就会增加
0.1

在数学中，它看起来是这样的（没有第1节的另一半）：

*{
保证金：0；
填充：0；
框大小：边框框；
}
html{
滚动行为：平滑；
}
身体{
高度：自动；
}
.科{
高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.第1节{
背景色：红色；
}
.第2节{
背景颜色：黄色；
}
.第3节{
背景颜色：绿色；
}
.第4节{
背景颜色：蓝色；
}

第一节
第二节
第三节
第四节
您可以收听
滚动
事件，并获取当前
滚动条（）
以查看用户滚动条的位置。然后做数学题

如下所示：


var section=$（“.section 2”）；
var sectionHeight=section.height（）；
var sectionTop=section.offset（）.top；
函数检查\u onscroll（）{
var scrollFromTop=$（窗口）.scrollTop（）；
如果（sectionTop-（$（window）.height（）/2）我不确定您要缩放的是什么，因此此代码段根据h2元素在视图中的部分的多少来缩放h2元素。如果视图中的部分少于50%，则它仍在缩放1。对于剩余部分（即一半）的每十分之一，它会增加缩放比例

我们使用intersectionObserver为我们做这件事，因为它会告诉我们视图中部分的比率

首先，我们创建一个intersectionObserver，告诉它当一个元素在视口中占50%时进行观察，然后每隔1/10的剩余部分进行观察

然后我们要求观察者观察每个部分

当观察到一个截面以50%、55%或60%的速度进入视口时，我们将其h2元素按1加上该量（即0到1之间）进行缩放

如果您在observer回调函数中console.log比率，您将看到它们并不总是精确地为0.1或0.2等，但它们是显示半元素实际在视图中的比例的分数。使用这些值而不是计算x+0.1，可以更准确地显示已完成的滚动次数，从而使结果更准确更平滑

（注意，在这段代码中jquery似乎没有多大用处，所以它被删除了）


let callback=（条目，观察者）=>{
//摘自MDN文档：
entries.forEach（entry=>{
//每个条目描述了一个观察到的交叉点的变化
//目标要素：
//entry.boundingClientRect
//入口.交叉比
//entry.intersectionRect
//entry.isIntersecting
//entry.rootBounds
//进入目标
//进场时间
entry.target.querySelector（'h2'）.style.transform='scale（+（1+entry.intersectionRatio）+'）；
});
};
让选项={
阈值：[0.55,0.60,0.65,0.70,0.75,0.80,0.85,0.90,0.95,1.00]
}
让observer=新的IntersectionObserver（回调，选项）；
const sections=document.querySelectorAll（'.section'）；
sections.forEach（section=>{observer.observe（section，options）；}）；
*{
保证金：0；
填充：0；
框大小：边框框；
}
html{
滚动行为：平滑；
}
身体{
高度：自动；
}
.科{
高度：100vh；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.第1节{
背景色：红色；
}
.第2节{
背景颜色：黄色；
}
.第3节{
背景颜色：绿色；
}
.第4节{
背景颜色：蓝色；
}

第一节
第二节
第三节
第四节
您是否考虑过IntersectionObserver，它可以让您在一个元素上设置几个“滚动点”？您能给我举个例子吗？我不清楚您到底想增加x的时间。是第2节的每十分之一被滚动一次，还是第1节的一半的十分之一或第1节的十分之一（第1节的下半部分加上第2节的所有部分）或…？它不会返回相同的
值，这取决于滚动速度。它不在1和2之间，但无论如何，谢谢你。非常感谢你的回答和解释
if (true) {
    $(element).css({
        transform: "scale(x)",
    }, 500, 'easeInOutSine');
}
else {
    $(element).css({
        transform: "scale(x)",
    }, 500, 'easeInOutSine');
}

var section = $(".section2");
var section_height = section.height();
var one_of_ten = section_height / 10;
var count = 0;
var x = 1;

while(x <= 2){
    count = 0;
    while(count <= one_of_ten){
        count++;
    }
    x+=0.1;
}