HTML/JS：暂停垂直滚动并为元素添加动画

Question

我有一个网站，其中包含一个具有水平溢出的

<div>

元素。我希望当用户从上到下垂直滚动网站时，div 从左到右水平滚动。在此阶段，主要内容不应移动，只有 div 应该滚动。一旦 div 完全滚动到右侧，网站的垂直滚动应该正常继续。反过来也应该如此。

我尝试使用 ScrollMagic 进行固定，但是在尝试固定主要内容容器时遇到卡顿：

https://codepen.io/oelrim/pen/ZEGWvOK

还有其他插件可以实现我想要的吗？

Answer 1

试试这个：

var scene = document.querySelector('#sec-2');
var rect = document.querySelector('#rect');

var startEffect = scene.getBoundingClientRect().top + window.scrollY;
var effectLength = 500;

scene.style.marginBottom = effectLength +'px';
window.addEventListener('scroll', function(e){
  var effect = window.scrollY - startEffect;

if(effect > 0 && effect < effectLength) {
  scene.style.marginTop = effect+'px';
  scene.style.marginBottom = effectLength-effect+'px';
  rect.style.left = effect * (scene.offsetWidth-rect.offsetWidth) /effectLength+'px';
} else if (effect < 0) {
  scene.style.marginTop = 0;
  scene.style.marginBottom = effectLength+'px';
  rect.style.left = 0;
} else {
  scene.style.marginTop = effectLength+'px';
  scene.style.marginBottom = 0;
  rect.style.left = (scene.offsetWidth-rect.offsetWidth)+'px';
}

});

html, body {padding:0;margin:0}

#sec-1 {
height: 100vh;
background: repeating-linear-gradient(yellow 0, yellow 10px, green 10px, green 20px);
}
#sec-2 {
position: relative;
height: 100vh;
background: repeating-linear-gradient(red 0, red 10px, green 10px, green 20px);}
#sec-3 {
  height: 100vh;
background: repeating-linear-gradient(red 0, red 10px, blue 10px, blue 20px);}
h1 {
color: white;
text-shadow:  2px 2px 3px black, -2px -2px 3px black;
margin: 0;
}
#rect {
position: absolute;
width: 60px;
height: 60px;
background-color: white;
top: calc(50% - 30px);
left: 0;
}

<div id="sec-1">
<h1>This is section 1</h1>
</div>
<div id="sec-2">
<h1>This is section 2</h1>
<div id="rect"></div>
</div>
<div id="sec-3">
<h1>This is section 3</h1>
</div>

Answer 2

很棒的片段。谢谢约瑟夫·图卡钦斯基。 我知道这篇文章很旧。也许你们还在这个星球上:D 谢谢

我将您的代码与光滑的滑块结合起来，计算了效果变量的模数以切换到下一张幻灯片。效果很好。

今天，一位客户抱怨卡顿，这是真的，在 Windows 上切换到除 Firefox 之外的其他浏览器，在 mAcO 浏览器中我看到了卡顿。奇怪的是，随着鼠标滚轮移动缓慢，div 会向上滑动一点，然后又下降。

我有一个想法，也许改变 margintop 并不是每个周期都有帮助，但这并没有按计划进行。

是否有其他方法可以在咆哮时固定 div 以消除口吃？ 谢谢