Javascript 实现全屏滚动实例代码

下面我将分享一下如何用JavaScript实现全屏滚动，并提供两个示例。

步骤一：设置全屏滚动的HTML结构

我们可以通过设置position: fixed属性的父级元素来实现全屏滚动。例如：

<div id="scroll-container">
  <div class="scroll-section">
    <!--第一屏的内容-->
  </div>
  <div class="scroll-section">
    <!--第二屏的内容-->
  </div>
  <div class="scroll-section">
    <!--第三屏的内容-->
  </div>
</div>

其中，scroll-container是设置了position: fixed属性的父级元素，scroll-section是每一页的内容区域。

步骤二：设置相关CSS样式

我们需要设置scroll-container的宽度、高度和 overflow 属性，同时设置每一页的高度。

#scroll-container {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.scroll-section {
  height: 100%;
}

步骤三：使用JavaScript实现全屏滚动

下面是一种常见的实现全屏滚动的方法。

var container = document.getElementById('scroll-container');
var sections = document.getElementsByClassName('scroll-section');
var currentSectionIndex = 0; // 当前显示的页面索引
var isAnimating = false; // 当前是否正在动画中

// 设置滚轮事件监听器
window.addEventListener('mousewheel', function (e) {
  e.preventDefault(); // 阻止默认的滚轮行为

  // 显示下一页
  if (e.deltaY > 0 && !isAnimating && currentSectionIndex < sections.length - 1) {
    currentSectionIndex++;
    animateScroll();
  }

  // 显示上一页
  if (e.deltaY < 0 && !isAnimating && currentSectionIndex > 0) {
    currentSectionIndex--;
    animateScroll();
  }
});

// 动画滚动效果
function animateScroll() {
  isAnimating = true;

  // 计算要滚动的距离
  var scrollDistance = sections[currentSectionIndex].offsetTop - container.scrollTop;
  var scrollStep = Math.PI / (500 / 15); // 每次滚动的距离

  var cosParameter = scrollDistance / 2; // 计算滚动曲线的参数
  var scrollCount = 0;
  var scrollMargin;

  // 滚动页面
  function step() {
    setTimeout(function () {
      if (scrollCount < scrollDistance) {
        requestAnimationFrame(step);
        scrollCount = scrollCount + 1;
        scrollMargin = cosParameter - cosParameter * Math.cos(scrollCount * scrollStep);
        container.scrollTop = sections[currentSectionIndex].offsetTop - scrollMargin;
      } else {
        isAnimating = false;
      }
    }, 15);
  }

  step();
}

示例一：仿制Skrollr实现视差滚动

下面的代码演示了如何使用JavaScript实现视差滚动效果，仿制Skrollr。

<div id="parallax-container">
  <div class="parallax-section" data-depth="0.2">
    <!-- 第一屏的内容 -->
  </div>
  <div class="parallax-section" data-depth="0.4">
    <!-- 第二屏的内容 -->
  </div>
  <div class="parallax-section" data-depth="0.6">
    <!-- 第三屏的内容 -->
  </div>
</div>

我们需要在每个parallax-section元素上添加data-depth属性来设置它们的滚动速度。

// 获取Parallax容器和页面
var container = document.getElementById('parallax-container');
var sections = document.getElementsByClassName('parallax-section');

// 滚动视差效果
function parallaxScroll() {
  for (var i = 0; i < sections.length; i++) {
    var depth = sections[i].getAttribute('data-depth');
    var translate3d = 'translate3d(0, ' + -(container.scrollTop * depth) + 'px, 0)';
    sections[i].style.transform = translate3d;
  }
}

// 设置滚动事件的监听器
window.addEventListener('scroll', parallaxScroll);

示例二：实现网页顶部轮播图

下面的代码演示了如何使用JavaScript实现网页顶部轮播图的效果。

<div id="carousel-container">
  <div class="carousel-section">
    <div class="carousel-item">
      <!-- 轮播图1的内容 -->
    </div>
    <div class="carousel-item">
      <!-- 轮播图2的内容 -->
    </div>
    <div class="carousel-item">
      <!-- 轮播图3的内容 -->
    </div>
  </div>
</div>

我们需要在carousel-section元素上设置overflow: hidden属性，同时在carousel-item元素上设置它们的宽度和排列方式。

#carousel-container {
  width: 100%;
  height: 300px;
  position: relative;
}

.carousel-section {
  width: 300%; /* 三张图片的宽度 */
  height: 100%;
  display: flex;
  transition: transform 0.6s ease;
  overflow: hidden;
}

.carousel-item {
  width: 33.33%; /* 一张图片的宽度 */
  height: 100%;
}

接下来是JavaScript代码，它会在轮播图停留3秒后切换到下一张图片。

var carouselContainer = document.getElementById('carousel-container');
var carouselSection = document.querySelector('.carousel-section');
var carouselItems = document.querySelectorAll('.carousel-item');
var currentCarouselIndex = 0; // 当前显示的图片索引

// 切换到下一张图片
function nextCarouselItem() {
  if (currentCarouselIndex < carouselItems.length - 1) {
    currentCarouselIndex++;
  } else {
    currentCarouselIndex = 0;
  }
  moveCarousel();
}

// 移动Carousel容器
function moveCarousel() {
  var amountToMove = currentCarouselIndex * -100;
  var translate3d = 'translate3d(' + amountToMove + '%, 0, 0)';
  carouselSection.style.transform = translate3d;
}

// 定时器切换图片
var carouselInterval = setInterval(nextCarouselItem, 3000);

以上就是用JavaScript实现全屏滚动的完整攻略和两个示例的详细说明。