【发布时间】：2023-03-08 19:32:01
【问题描述】：
我正在尝试实现一个section，当它在视图中时，它变成一个水平滚动条，直到滚动条中的项目（在我的例子中是图像）完成，此时它又变成一个垂直滚动条。
我在以下演示中看到并调整了我的方法：
我想要实现的美感是默认显示两个图像，然后滚动查看休息。请参阅下面的模型：
这是我目前的做法：
$(function() {
let scroll_tl = gsap.timeline({
scrollTrigger: {
trigger: '.horizontalScroller__images',
start: "top center",
// pin: true,
scrub: true,
end: "+=300",
// markers: true,
}
});
var images = document.querySelectorAll('.horizontalScroller__item');
scroll_tl.to('.horizontalScroller__intro', {
duration: 1,
ease: "slow"
});
scroll_tl.to(images, {
xPercent: -85 * (images.length - 1),
scrollTrigger: {
trigger: ".horizontalScroller__images",
start: "center center",
pin: true,
// horizontal: true,
// pinSpacing:false,
markers: true,
scrub: 1,
snap: 1 / (images.length - 1),
// end: () => `+=4320`
}
});
});.spacer{
height: 300vh;
background: lightblue;
}
.horizontalScroller {
padding: 114px 0 80px 0;
height: 100vh;
position: relative;
background-color: #5d209f;
}
.horizontalScroller__intro {
margin-bottom: 25px;
color: #FFFFFF;
}
.horizontalScroller__header {
margin-bottom: 17px;
}
.horizontalScroller__images {
display: flex;
justify-content: center;
align-items: center;
}
.horizontalScroller__scroll {
position: relative;
overflow: hidden;
padding: 60px 0;
}
/* .horizontalScroller__item {
width: 25vw;
} */<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/ScrollTrigger.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="spacer"> Scroll down </div>
<section class="horizontalScroller">
<div class="container">
<div class="row">
<div class="col-12 col-md-8 col-xl-6">
<div class="horizontalScroller__intro">
<h2 class="horizontalScroller__header">This is the header</h2>
<p class="horizontalScroller__standfirst mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
<div class="horizontalScroller__scroll">
<div class="horizontalScroller__images" id="horizontal-scroll">
<div class="horizontalScroller__item">
<img class="horizontalScroller__image" src="https://picsum.photos/200/300" alt="image">
</div>
<div class="horizontalScroller__item">
<img class="horizontalScroller__image" src="https://picsum.photos/200/300" alt="image">
</div>
<div class="horizontalScroller__item">
<img class="horizontalScroller__image" src="https://picsum.photos/200/300" alt="image">
</div>
<div class="horizontalScroller__item">
<img class="horizontalScroller__image" src="https://picsum.photos/200/300" alt="image">
</div>
</div>
</div>
</section>在我上面的演示中，您可以看到在该部分中滚动时，图像会向下移动（不是有意的），然后它们开始向左移动（而水平滚动应该向右移动）。
另外，为了最初显示这两张卡，我尝试将width 设置为.horizontalScroller__item，但这只会更加混乱。
不确定我的代码为什么会这样执行，有什么想法吗？
【问题讨论】：
标签： javascript jquery css gsap scrolltrigger