html+css+js如何实现这样子的效果？

Question

参考网站：https://www.ibox.art/
参考他大事记那块的样式，就是页面滑动到大事记再往下滑时页面不会继续滑动会把其他年份的事记也往左拉直到其他年份的全部显示完毕页面才接着往下拉

请问他是如何实现的，请列出他的实现代码

Answer 1

参考免费微信小程序：皆我百晓生 作答，经由专家-皆知整理回复，如问题解决，望采纳；如仍有疑问，请评论回复。

要实现类似于iBox艺术网站大事记部分的滚动效果，我们可以采用HTML、CSS和JavaScript结合的方式来完成。这个效果主要是通过监听滚动事件，然后动态地调整内容容器的CSS属性来达到。这里的关键技术点包括CSS的布局（特别是position, overflow, 和 transform属性）以及JavaScript中的滚动事件处理。

HTML结构

首先，构建基本的HTML结构，包括一个外层容器包裹所有的年份卡片，以及每个年份卡片的结构。

<div class="timeline-container">
  <div class="year-card" style="left: 0%;">2020</div>
  <div class="year-card" style="left: 100%;">2021</div>
  <div class="year-card" style="left: 200%;">2022</div>
  <!-- 更多年份卡片... -->
</div>

CSS样式

接着，应用一些基本的CSS样式，确保年份卡片排列并隐藏超出容器的部分。

.timeline-container {
  position: relative;
  overflow-x: hidden; /* 隐藏超出容器的x轴内容 */
  white-space: nowrap; /* 让所有卡片在一行内显示 */
  width: 100%;
  height: 100vh; /* 可根据实际需要调整高度 */
}

.year-card {
  display: inline-block; /* 使卡片在同一行显示 */
  width: 100%; /* 每个卡片宽度为100%，实际展示宽度由left控制 */
  height: 100%; /* 卡片高度 */
  text-align: center;
  transition: left 0.5s ease; /* 平滑过渡效果 */
}

JavaScript逻辑

最后，使用JavaScript来监听滚动事件，并基于滚动位置动态调整年份卡片的位置，直到所有卡片完全展示后，才允许页面继续向下滚动。

document.addEventListener('DOMContentLoaded', function() {
  var container = document.querySelector('.timeline-container');
  var cards = Array.from(document.querySelectorAll('.year-card'));
  var totalWidth = cards.reduce((sum, card) => sum + parseInt(card.offsetWidth), 0);
  var scrollThreshold = totalWidth - window.innerWidth; // 页面可以滚动的最大宽度
  var currentScroll = 0;
  
  window.addEventListener('scroll', function() {
    currentScroll = window.scrollY;
    
    // 当滚动到特定位置开始固定卡片并水平移动
    if (currentScroll > container.offsetTop && currentScroll < container.offsetTop + container.offsetHeight) {
      var scrollPercentage = (currentScroll - container.offsetTop) / container.offsetHeight;
      var maxTranslateX = -(totalWidth - window.innerWidth);
      var translateX = Math.min(scrollPercentage * maxTranslateX, maxTranslateX);
      
      cards.forEach(function(card, index) {
        card.style.transform = `translateX(${translateX}px)`; // 移动卡片
      });
    }
  });
});

这段代码首先计算了所有年份卡片的总宽度，并确定了一个滚动阈值。当用户滚动到“大事记”区域时，根据滚动距离的百分比来计算每个卡片应该平移的距离，直到所有卡片都展示出来。当所有卡片展示完毕后，页面将不再限制滚动，继续向下滚动。

请注意，这只是一个基础示例，可能需要根据实际情况调整样式细节和逻辑处理，以达到最佳的视觉和交互效果。