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>

HTML/JS：暂停垂直滚动并为元素设置动画

HTML/JS: Pause vertical scrolling and animate an element instead

html

javascript

animation

scroll

scrollmagic