主页 / 问题 / 1179446
Accepted
Сергей Комыза
Asked:2020-09-18 02:08:02 +0800 CST2020-09-18 02:08:02 +0800 CST

页面块滚动

  • 772

也许有人会告诉。在几个区块中有一个单页站点。而且我需要确保每个块在滚动时开始超出视口的上边界，开始以比跟随它的速度慢的速度滚动。嗯，依次类推。我从滚动文档开始通过可被 2 整除的“translateY”属性进行操作。在第一个屏幕上，它可以工作，但只是以某种方式生涩，然后垃圾开始了。我不明白为什么（有什么办法吗？但我只对纯js感兴趣。提前谢谢

https://codepen.io/sergo/pen/gOrdWaX?editors=0010

const sections = document.querySelectorAll('.section');

document.addEventListener('scroll', function(){
  let scrollPage = window.pageYOffset;
  
  sections.forEach( item => {
  
  let sectionTopBorder = item.getBoundingClientRect().top;
  let sectionBottomBorder = item.getBoundingClientRect().bottom;
  console.log(sectionBottomBorder);  
  if( sectionTopBorder < 0 ){
    item.style.transform = 'translateY(' + scrollPage / 2 + 'px)';
    // item.querySelector('.section__inner').style.position = "fixed";    
  } else{
    item.style.transform = 'translateY(0)';
    // item.querySelector('.section__inner').style.position = "relative"; 
  } 
  
  });
});
body{
  
}

.section{
  position: relative;
  height: 100vh;
  border: 1px solid;
  background: #FFF;
}

.section__inner{
  position: relative;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
}

.section__inner img{
  width: 100%;
  height: 100%;
}

*{
  margin: 0;
  padding: 0;
}
<div class="section-wrap">
  
  <section class="section" style="display: none;">
    <div class="section__inner"></div>
  </section>
  
  <section class="section section-1" style="z-index: 1; background: red">
    <div class="section__inner">
       <img src="https://tes-game.ru/_nw/14/08884847.jpg" alt="">
    </div>
  </section>
  
  <section class="section section-2" style="z-index: 2; background: green">
    <div class="section__inner">
      <img src="https://xage.ru/media/posts/2019/8/26/26-minutes-of-gameplay-dying-light-2-in-4k-trailer_BOLSTko.jpg" alt="">
    </div>
  </section>
  
  <section class="section section-3" style="z-index: 3; background: yellow">
    <div class="section__inner" >
   <img src="https://free4kwallpapers.com/uploads/originals/2020/05/02/game-art-wallpaper.jpg" alt="">
    </div>
  </section>
  
  <section class="section section-4" style="z-index: 4; background: pink">
    <div class="section__inner" >
      <img src="https://images.hdqwalls.com/wallpapers/bthumb/resident-evil-2-2019-4k-5a.jpg" alt="">
    </div>
  </section>
  
  <section class="section section-5" style="z-index: 5; background: grey">
    <div class="section__inner"></div>
  </section>
  
</div>

javascript

1 个回答

  1. Best Answer

    为什么你甚至需要它在这里window.pageYOffset？这requestAnimationFrame是非常可取的。

    const sections = document.querySelectorAll('.section');

function repaint() {
  requestAnimationFrame(() => {
    sections.forEach(item => {
      let rect = item.getBoundingClientRect();
      item.style.transform = (rect.top < 0 && rect.bottom > 0) ? 
        'translateY(' + (-rect.top / 2) + 'px)' : '';
    });
  });
}

document.addEventListener('scroll', repaint);
window.addEventListener('resize', repaint);
    body{
  
}

.section{
  position: relative;
  height: 100vh;
  border: 1px solid;
  background: #FFF;
}

.section__inner{
  position: relative;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
}

.section__inner img{
  width: 100%;
  height: 100%;
}

*{
  margin: 0;
  padding: 0;
}
    <div class="section-wrap">
  
  <section class="section" style="display: none;">
    <div class="section__inner"></div>
  </section>
  
  <section class="section section-1" style="z-index: 1; background: red">
    <div class="section__inner">
       <img src="https://tes-game.ru/_nw/14/08884847.jpg" alt="">
    </div>
  </section>
  
  <section class="section section-2" style="z-index: 2; background: green">
    <div class="section__inner">
      <img src="https://xage.ru/media/posts/2019/8/26/26-minutes-of-gameplay-dying-light-2-in-4k-trailer_BOLSTko.jpg" alt="">
    </div>
  </section>
  
  <section class="section section-3" style="z-index: 3; background: yellow">
    <div class="section__inner" >
   <img src="https://free4kwallpapers.com/uploads/originals/2020/05/02/game-art-wallpaper.jpg" alt="">
    </div>
  </section>
  
  <section class="section section-4" style="z-index: 4; background: pink">
    <div class="section__inner" >
      <img src="https://images.hdqwalls.com/wallpapers/bthumb/resident-evil-2-2019-4k-5a.jpg" alt="">
    </div>
  </section>
  
  <section class="section section-5" style="z-index: 5; background: grey">
    <div class="section__inner"><img src="https://i.ytimg.com/vi/kszGLd6x_oc/maxresdefault.jpg" alt=""></div>
  </section>
  
</div>

    • 4

相关问题