Javascript 在滚动停止中快速滚动

查找以下图像参考：

我想要的是当窗口视图中只有一个部分（第4部分）出现在40%-80%左右时。在

滚动

停止时，第4节应自动滚动以适合

窗口

在这里，基本的没有任何脚本

body，
html{
身高：100%；
保证金：0；
}
.部分{
身高：100%；
背景：#000；
不透明度：0.7；
}
#第2节{
背景：#ccc；
}
#第三节{
背景：#9c0；
}
#第四节{
背景：#999；
}
#第四节{
背景：ddd；
}

---

使用脚本将屏幕的

滚动顶部

与

部分的
偏移（）.top
和
高度
进行比较

请注意，
比率
确定元素在屏幕上的显示量（大于0.6用于确定是否有超过60%的
部分
在屏幕上可见）

请参阅下面的演示，并附带注释：


/*debouce（提供：下划线.js）*/
函数解盎司（函数、等待、立即）{
var超时；
返回函数（）{
var context=this，
args=参数；
var later=function（）{
超时=空；
如果（！immediate）函数应用（上下文，参数）；
};
var callNow=立即&&！超时；
clearTimeout（超时）；
超时=设置超时（稍后，等待）；
if（callNow）funct.apply（上下文，参数）；
};
};
//滚动侦听器
$（窗口）。滚动（去盎司（函数（）{
变量$window=$（window）；
//如果希望所有部分都有效果，请将此更改为“.sections”
$（'#section4'）。每个（函数（）{
var top\u of_元素=$（this）.offset（）.top；
变量bottom\u of_元素=$（this.offset（）.top+$（this.outerHeight（）；
var bottom_of_screen=$window.scrollTop（）+$window.height（）；
var top\u of_screen=$window.scrollTop（）；
var height_of_元素=$（this）.outerHeight（）；
//屏幕顶部下方的if元素
if（元素的顶部>屏幕的顶部和屏幕的底部<元素的底部）{
var比率=（屏幕底部\u-元素顶部\u）/元素高度\u；
如果（比率>0.6）{
//通过向上滚动设置动画
$（'body，html'）。设置动画({
scrollTop:$（this）.offset（）.top
});
}
}
//屏幕顶部上方的if元素
else if（元素的底部>屏幕的顶部和屏幕的底部>元素的底部）{
var比率=（元素底部\u-屏幕顶部\u）/元素高度\u；
如果（比率>0.6）{
//通过向下滚动设置动画
$（'body，html'）。设置动画({
scrollTop:$（this）.offset（）.top
});
}
}
});
}, 250));
body，
html{
身高：100%；
保证金：0；
}
.部分{
身高：100%；
背景：#000；
不透明度：0.7；
}
#第2节{
背景：#ccc；
}
#第三节{
背景：#9c0；
}
#第四节{
背景：#999；
}
#第四节{
背景：ddd；
}

也可以使用fullPage.js，如图所示。fullPage.js非常好，但当您希望所有部分都可以快速滚动时。但当只涉及到一个部分时，可以快速滚动。使用fullpage.js有点复杂。我以前尝试过，但多次卡住。您是否尝试过使用该功能启用或禁用它？