Javascript 如何使div滚动而页面本身不滚动？
我偶然发现这个，觉得效果真的很神奇。我希望在某种程度上复制这种效果。我知道它将涉及css和javascript。在屏幕上渲染和居中的div非常容易。我遇到的问题是让每个人都从屏幕上滚动，而不是屏幕本身滚动。可以使用什么效果或策略来实现这一点Javascript 如何使div滚动而页面本身不滚动？,javascript,html,css,scroll,Javascript,Html,Css,Scroll,我偶然发现这个，觉得效果真的很神奇。我希望在某种程度上复制这种效果。我知道它将涉及css和javascript。在屏幕上渲染和居中的div非常容易。我遇到的问题是让每个人都从屏幕上滚动，而不是屏幕本身滚动。可以使用什么效果或策略来实现这一点 编辑：我不希望使用javascript或外部库方法。谢谢您可以使用溢出：自动或溢出：滚动 .container{ 高度：100px； 溢出：自动；/*您还可以使用溢出：滚动；选项*/ } 1 2 3 4 5 6 7 8 9 10 不管怎样，您都需要一点
编辑：我不希望使用javascript或外部库方法。谢谢您可以使用溢出：自动或溢出：滚动
.container{
高度：100px；
溢出：自动；/*您还可以使用溢出：滚动；选项*/
}
1
2
3
4
5
6
7
8
9
10
var-active=0；
var divs=document.querySelectorAll（'.wrap>div'）
函数onScroll（）{
var winHeight=window.innerHeight
var scrollmat=document.body.scrollTop；
var newActive=Math.floor（scrollAmt/winHeight）
如果（活动！=新建活动）{
活动=新活动；
部门forEach（功能（el、indx）{
if（indx div）{
高度：100vh；
宽度：100%；
位置：固定；
排名：0；
左：0；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.wrap>div>div{
宽度：50%；
身高：50%；
}
.wrap>div.first{z-index:3；}
.wrap>div.second{z-index:2；}
.wrap>div.third{z-index:1；}
.wrap>div.first>div{
背景：蓝色；
身高：60%；
}
.wrap>div.second>div{
背景：黄色；
宽度：55%；
身高：55%；
}
.wrap>div.third>div{
背景：绿色；
宽度：60%；
}
.wrap>div.released{
位置：相对位置；
}