当前位置:主页 > JavsScript库 > 其它 >

Vanilla JavaScript 中的全屏单页滚动 - slider-scroll
栏目分类:其它   发布日期:2021-08-26   浏览次数:

全屏单页滚动效果,使用户能够使用鼠标滚轮滚动全页部分。

还带有一个侧面进度条,可根据当前滚动位置自动更新。

使用:

1. 所需的 HTML 结构。

<div class="layout"> 
  <div class="section-stick"> 
    <div class="stick active"></div> 
  </div> 
  <section class="s1"> 
    <div class="home" > 
      <span>滑块滚动示例</span> 
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria -hidden="true" focusable="false" width="1em" height="1em" style="-ms-transform:rotate(360deg);-webkit-transform:rotate(360deg);transform:rotate(360deg) ;" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M5 6l5 5l5-5l2 1l-7 7l-7-7z" fill="#fff"/><
  <section class="s3">第三节</section> 
  <section class="s4">第四节</section> 
</div>

2. 所需的CSS样式。

:root {
  --color-white: #fff;
  --time-animation: 0.6s;
}
 
@keyframes pulse {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(25px);
  }
  100% {
    transform: translateY(0px);
  }
}
 
html {
  scrollbar-width: none;
}
 
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  overflow: hidden scroll;
  -ms-overflow-style: none;
}
 
body::-webkit-scrollbar {
  display: none;
}
 
.layout {
  width: 100%;
  height: calc(100vh * 3);
  position: relative;
}
 
.layout .section-stick {
  margin: auto;
  position: fixed;
  right: 50px;
  bottom: 50px;
  display: flex;
  flex-direction: column;
  row-gap: 30px;
  align-items: center;
  justify-content: flex-start;
  z-index: 1000;
}
 
.layout .section-stick .stick,
.layout .section-stick .active {
  width: 13px;
  height: 62px;
  border: none;
  border-radius: 9px;
}
 
.layout .section-stick .stick {
  position: relative;
  background-color: rgba(255, 255, 255, 0.4);
  transition: all var(--time-animation) ease-in-out;
}
 
.layout .section-stick .active {
  position: absolute;
  background-color: var(--color-white);
  box-shadow: 0px 0px 12px 1px var(--color-white);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
 
.layout section {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-white);
  font-size: 80px;
  font-weight: 600;
  transform: translateY(100vh);
  transition: all var(--time-animation) ease-in-out;
  z-index: 0;
}
 
.layout section .home {
  display: flex;
  flex-direction: column;
  row-gap: 45px;
  align-items: center;
}
 
.layout section .home svg {
  animation: pulse 1.4s linear infinite normal;
}
 
.layout .s1 {
  background-color: #4d2536;
  transform: translateY(0);
  z-index: 4;
}
 
.layout .s2 {
  background-color: #02486b;
  z-index: 3;
}
 
.layout .s3 {
  background-color: #171716;
  z-index: 2;
}
 
.layout .s4 {
  background-color: #154621;
  z-index: 1;
}
 
/*** RESPONSIVE ***/
 
/* MOBILE */
@media screen and (max-width: 576px) {
  body::-webkit-scrollbar {
    width: 0px;
    background: transparent;
    -webkit-appearance: none;
  }
 
  .layout .section-stick {
    right: 20px;
    bottom: 20px;
    transform: scale(0.7);
  }
 
  .layout section {
    font-size: 40px;
  }
}

3. 启用单页滚动效果的主要JavaScript。

const TIME_OUT = 600 // 应该是section的过渡时间
const body = document.querySelector('body')
const sectionsQty = document.querySelectorAll('section').length
const sectionStick = document.querySelector('.section-stick')
let startFlag = true
let initialScroll = window.scrollY
let qty = 1,
  main = null,
  next = null
// 在 .section-stick 中添加子元素,因为存在
Array(sectionsQty)
  .fill()
  .forEach(() => {
    sectionStick.innerHTML = sectionStick.innerHTML + '<div class="stick"></div>'
  })
console.log('SLIDE', qty)
// 监听滚动事件
window.onscroll = () => {
  if (startFlag) {
    const scrollDown = this.scrollY >= initialScroll
    const scrollLimit = qty >= 1 && qty <= sectionsQty
    // 验证滚动没有超过节数
    if (scrollLimit) {
      body.style.overflowY = 'hidden' // Lock el scroll
      if (scrollDown && qty < sectionsQty) {
        main = document.querySelector(`section.s${qty}`)
        next = document.querySelector(`section.s${qty + 1}`)
        main.style.transform = 'translateY(-100vh)'
        next.style.transform = 'translateY(0)'
        qty++
      } else if (!scrollDown && qty > 1) {
        main = document.querySelector(`section.s${qty - 1}`)
        next = document.querySelector(`section.s${qty}`)
        main.style.transform = 'translateY(0)'
        next.style.transform = 'translateY(100vh)'
        qty--
      }
      // 滚动进度条
      const active = document.querySelector('.section-stick .stick.active')
      active.style.top = (62 + 30) * (qty - 1) + 'px'
    }
    console.log('SLIDE', qty)
    // 等待滚动完成以重置值
    setTimeout(() => {
      initialScroll = this.scrollY
      startFlag = true
      body.style.overflowY = 'scroll' // 解锁滚动
    }, TIME_OUT)
    startFlag = false
  }
  // 将滚动条保持在视口的中间
  window.scroll(0, window.screen.height)
}



官方网站:https://github.com/EdixonAlberto/slider-scroll

相关热词: slider-scrol

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库