SOURCE

function Scroll(up, down) {
    //兼容性写法，该函数也是网上别人写的，不过找不到出处了，蛮好的，所有我也没有必要修改了
    //判断鼠标滚轮滚动方向
    if (window.addEventListener) //FF,火狐浏览器会识别该方法
        window.addEventListener('DOMMouseScroll', wheel, false);
    window.onmousewheel = document.onmousewheel = wheel; //W3C
    //统一处理滚轮滚动事件
    function wheel(event) {
        var delta = 0;
        if (!event)
            event = window.event;
        if (event.wheelDelta) { //IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
            delta = event.wheelDelta / 120;
            if (window.opera)
                delta = -delta; //因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
        }
        else if (event.detail) { //FF浏览器使用的是detail,其值为“正负3”
            delta = -event.detail / 3;
        }
        if (delta)
            handle(delta);
    }
    //上下滚动时的具体处理函数
    function handle(delta) {
        if (delta < 0) { //向下滚动
            down(delta);
        }
        else { //向上滚动
            up(delta);
        }
    }
}
function throttle(method, context, delay) {
    var wait = false;
    return function () {
        var args = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            args[_i] = arguments[_i];
        }
        if (!wait) {
            method.apply(context, args);
            wait = true;
            setTimeout(function () {
                wait = false;
            }, delay);
        }
    };
}
{ }
var FullScroll = /** @class */ (function () {
    function FullScroll(config) {
        var _this = this;
        this.width = 0;
        this.height = 0;
        this.el = null;
        this.current = 0;
        this.pages = 0;
        this.init(config);
        this.regishterEvent(function (delta) {
            _this.scrollTo(--_this.current);
        }, function (delta) {
            _this.scrollTo(++_this.current);
        });
    }
    FullScroll.prototype.init = function (config) {
        document.body.style.overflow = "hidden";
        this.width = document.documentElement.clientWidth;
        this.height = document.documentElement.clientHeight;
        this.el = document.querySelector(config.el);
        this.el.style.height = this.height + "px";
        this.el.style.transition = "transform .5s";
        var child = this.el.querySelectorAll(".block");
        child.forEach(element=>{
          element.style.height = "100%";
          element.style.width = "100%";
        })
        this.pages = child.length;
    };
    FullScroll.prototype.regishterEvent = function (up, down) {
        var tup = throttle(up, this, 1000);
        var tdown = throttle(down, this, 1000);
        Scroll(tup, tdown);
    };
    FullScroll.prototype.scrollTo = function (num) {
        if (num >= this.pages)
            num = this.pages-1;
        if (num < 0)
            num = 0;
        this.current = num;
        this.el.style.transform = "translateY(-" + this.height * this.current + "px)";
    };
    return FullScroll;
}());
setTimeout(function () {
    new FullScroll({
        el: ".box"
    });
}, 2000);

<div class="box">
  <div class="block red"></div>
  <div class="block green"></div>
  <div class="block yellow"></div>
</div>

* {
  margin: 0;
  padding: 0;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}
.block{
  width: 100%;
  height: 100%;
}