全屏页面滚动、默认三屏，通过鼠标滚轮切换

最新推荐文章于 2023-09-07 17:05:23 发布

乾卦三爻

最新推荐文章于 2023-09-07 17:05:23 发布

阅读量302

点赞数

文章标签： html5 前端 javascript css

本文链接：https://blog.csdn.net/weixin_46325225/article/details/131473586

版权

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Scrolling Effect with Animation</title>
  <link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
  <div class="scroll-container">
    <div class="page page1">Page 1</div>
    <div class="page page2">Page 2</div>
    <div class="page page3">Page 3</div>
  </div>
  

  <script src="./index.js"></script>
</body>
</html>

index.css

*{
  margin: 0;
}
.scroll-container {
  height: 100vh;
  overflow: hidden;
  scroll-behavior: smooth;
}

.page {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}

.page1 {
  background-color: #38d0f6;
}

.page2 {
  background-color: #58ff2e;
}

.page3 {
  background-color: #fc4bff;
}

index.js

var container = document.querySelector('.scroll-container');
var pages = document.querySelectorAll('.page');

function handleScroll(event) {
  event.preventDefault();

  var delta = event.deltaY || event.detail || (-event.wheelDelta);
  var scrollHeight = container.scrollHeight - container.clientHeight;
  var scrollTop = container.scrollTop;
  var scrollPercentage = (scrollTop / scrollHeight) * 100;

  var currentStep = Math.floor(scrollPercentage / (100 / (pages.length - 1)));
  var nextStep = delta > 0 ? currentStep + 1 : currentStep - 1;

  if (nextStep >= 0 && nextStep < pages.length) {
    var nextPage = pages[nextStep];
    nextPage.classList.add('active');
    scrollToPage(nextPage);
  } else if (nextStep < 0) {
    var firstPage = pages[0];
    firstPage.classList.add('active');
    scrollToPage(firstPage);
  } else if (nextStep >= pages.length) {
    var lastPage = pages[pages.length - 1];
    lastPage.classList.add('active');
    scrollToPage(lastPage);
  }
}

function scrollToPage(page) {
  var pageOffsetTop = page.offsetTop;
  var containerOffsetTop = container.offsetTop;
  var offset = pageOffsetTop - containerOffsetTop;

  container.scrollTo({
    top: offset,
    behavior: 'smooth'
  });
}

container.addEventListener('wheel', handleScroll);
container.addEventListener('touchmove', handleScroll);

// 添加页面加载时的初始化
window.addEventListener('load', function() {
  var firstPage = pages[0];
  firstPage.classList.add('active');
});