Javascript 如何阻止比视口大的DIV滚动？

我有一个DIV（容器元素）

其中有一些元素我想淡入淡出（取决于用户滚动的方向）。这没问题

有关演示，请参阅嵌入式代码段

问题 注意演示中褪色的黑色区域；我想在淡入淡出的同时保持它在顶部（通过滚动一定距离）

在淡入淡出这些元素的过程中，我希望在淡入淡出完成之前保持父容器（DIV）不（垂直）移动。这部分对我来说是个问题

更新11-03-2017 我用一个例子更新了我的代码，这个例子在Chrome中运行正常（使用负

marginTop

（当向上滚动时）来拉

div

，使用正

top

（当向下滚动时）来拉

div

），但在Edge或Firefox中运行非常糟糕（

scroll

-滚动后激发的事件使其滞后）

我试过的

• 我试过使用

  position:sticky

  。它首先使用

  position:relative

  ，然后使用

  position:fixed

  ，所以它不能完全满足我的需要
• 我尝试过使用“position:fixed”（位置：固定）。当然，父容器DIV会粘在视口上。但是，由于其高度大于视口的高度，因此无法按我的预期方式工作，例如，如果用户滚动到大容器高度的50%，则使用“position:fixed”（位置：固定）会丢失此滚动面
• 我曾尝试将“position:fixed”与“scroll”事件和marginTop CSS属性（以及“top”CSS属性）结合使用。我得到了奇怪的结果。此外，“scroll”事件总是在用户滚动一定数量的像素后执行。因此，如果它起作用，可能会获得“laggy”体验
• 我已经搜索了jQuery插件等等，但是它们太依赖于“position:fixed”，因此也很有限
• 我尝试了ScrollMagic，同时使用GreenSock的TimelineMax执行了tween。例如，一个tween用于淡入和淡出，另一个tween用于制作边缘顶（再次）或顶部动画，以补偿滚动距离，同时使用“位置：绝对”和“位置：相对”
• 我已经尝试过捕捉鼠标滚轮事件并滚动程序（因此我可以选择不滚动）。这当然是一个选项。但我真的想要一个滚动条。移动体验滞后，因为当一个人进行程序滚动时，他不能使用例如“双击”手势
• 我已经尝试了很多东西，以及这些东西的很多变体

代码（嵌入式代码片段）-更新日期：2017年3月11日 代码在非Chrome（！）的浏览器中工作糟糕

var$window=$（window）；
//需要淡入淡出的元素。
var$fadingblack=$（“#fadingblack”）；
//渐弱元素的父元素。
变量$scrollcontainer=$（“#scrollcontainer”）；
//最后一个滚动顶部值。
var lastScrollTop=$window.scrollTop（）；
var lockForFade=假；
$window.on（'scroll'），
//在用户滚动后调用的函数。
函数（）{
//当前滚动上限值。
var currentScrollTop=$window.scrollTop（）；
//需要淡入的元素的Y坐标。
var scrollTopStart=$fadingblack.position（）.top；
//需要淡入的元素末端的Y坐标。
var scrollTopEndDown=scrollTopStart+$fadingblack.height（）；
var scrollTopEndUp=scrollTopStart-$fadingblack.height（）；
//已将需要淡入淡出的元素滚动到视图中。
//它会自动消失。
函数doFade（$el、$parent、lastScrollTop、currentScrollTop、scrollTopStart、scrollTopEnd）{
//淡入时的当前不透明度；由滚动位置决定。
//var currentOpacity=（currentScrollTop-scrollTopStart）/（scrollTopEnd-scrollTopStart）；
不透明度；
//scrollTop的临时变量。
var theTop；
var fadeCompleted；
函数undoPushAndScroll（）{
//保存父元素已按下的像素数。
var savedTop=$parent.position（）.top；
//然后重置此“推送量”。
$parent.css（“top”，0）；
//并向上滚动下推的像素量。
$window.scrollTop（currentScrollTop-savedTop）；
currentScrollTop-=savedTop；
}
函数undoPullAndScroll（）{
//保存父元素已上拉的像素数。
var savedTop=parseFloat（$parent.css（'marginTop'））；
//然后重置此“拉动量”。
$parent.css（“marginTop”，0）；
//并向下滚动上拉的像素量。
$window.scrollTop（currentScrollTop-savedTop）；
currentScrollTop-=savedTop；
}
函数undoPullAndDoPush（）{
var savedMarginTop=parseFloat（$parent.css（'marginTop'）；
$parent.css（'marginTop'，0）；
$window.scrollTop（currentScrollTop-savedMarginTop）；
currentScrollTop-=savedMarginTop；
//确定淡入开始（Y值）和当前滚动条（Y值）之间的差异。
var theTop=Math.abs（scrollTopStart-currentScrollTop）；//+savedMarginTop；
//将父元素向下按相同的差异。
$parent.css（“top”，theTop）；
}
函数undoPushAndDoPull（）{
//保存父元素已按下的像素数。
var savedTop=$parent.position（）.top；
$parent.css（'top'，0）；
$window.scrollTop（currentScrollTop-savedTop）；
currentScrollTop-=savedTop；
//用户已向上滚动。
//确定淡入开始（Y值）和当前滚动条（Y值）之间的差异。
var theTop=Math.abs（scrollTopStart-currentScrollTop）；
//将父元素向上拉相同的差异。
$pa