这是我参与更文挑战的第15天，活动详情查看：更文挑战

Slide In on Scroll

这个模块的内容就是对 scroll 的运用，主要的操作就是操作图片的滚动进入动画和滚动离开动画效果，使用到了 debounce（防抖），主要就是以实际效果效果为主。

一、效果展示

1.index-START.html

2.index-FINISHED.html

二、实现

最终代码

    <script>
    function debounce(func, wait = 20, immediate = true) {
      var timeout;
      return function() {
        var context = this, args = arguments;
        var later = function() {
          timeout = null;
          if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
      };
    }

    function scrollHandler(){
      // console.log("scroll",new Date().getTime());
      console.log(window.scrollY);

      let images = document.querySelectorAll("img");

      let windowTop =  window.scrollY;
      let windowBottom = windowTop + window.innerHeight;
      
      images.forEach((img)=>{
        let imgMiddle = img.offsetTop + img.height / 2;
        if( imgMiddle <  windowBottom && imgMiddle > windowTop) {
          img.classList.add("active");
        } else {
          img.classList.remove("active");
        }
      })

    }

    window.addEventListener("scroll",debounce(scrollHandler,100));
  </script>

三、总结回顾

过程分解

滚动事件的触发

     function scrollHandler(){
      console.log("scroll",new Date().getTime());
    }

    window.addEventListener("scroll",scrollHandler);

debounce使用

window.addEventListener("scroll",debounce(scrollHandler,100));  //间隔100ms

这个时候滚动的触发已经不像是刚才那样那么频繁了，但是其实这个 debounce 的使用还是要看情况进行使用的，我认为这个东西的使用也是要看情况的，如果你觉得这个滚动你使用起来有问题，需要用到 debounce，那么你就去用，而不是说，遇到这种情况都应该用，还要要视情况进行使用的。

滚动进入显示

从头部进入

    let images = document.querySelectorAll("img");

      let windowTop =  window.scrollY;
      let windowBottom = windowTop + window.innerHeight;
      
      images.forEach((img)=>{
        if(img.offsetTop < windowBottom) {
          img.classList.add("active");
        }
      })

可以看到，只要进入一点点，图片立马就显示了，这就是从头部进入。

但是这样体验是不是不太好，感觉很意外的样子，我都几乎看不到什么动画的过程，然后它就加载完了，那就再看看别的方式，看看哪一种更好。

从中间进入

    images.forEach((img)=>{
        if(img.offsetTop + img.height / 2 <  windowBottom) {
          img.classList.add("active");
        }
      })

这个中间进入就感觉好了很多，最起码在画面体验上要好一些。

从底部进入

    images.forEach((img)=>{
        if(img.offsetTop + img.height<  windowBottom) {
          img.classList.add("active");
        }
      })

可以看到，当滚动到图片中间的时候，图片还是没有显示，当滚动到底部的时候，图片显现。

但是，这个效果感觉体验也不是十分的好，总体上感觉起来还是觉得中间部分的进入效果是比较好的。

滚动离开显示

     images.forEach((img)=>{
        let imgMiddle = img.offsetTop + img.height / 2;
        if( imgMiddle <  windowBottom && imgMiddle > windowTop) {
          img.classList.add("active");
        } else {
          img.classList.remove("active");
        }
      })

四、重难点

感觉从后面的第十一天开始之后，更多的都是倾向于一些比较相对高级方便的写法，而且更注重于实际操作效果的展示和体验，相对于一些琐碎的知识点已经直接略过了。

JavaScript 30天编码挑战——第 13 天