要想实现通过鼠标滚轮滚动，缩放页面中的指定元素，主要是通过css3中的 transform: scale() 来实现的。

下面我说一下实现的基本思路步骤。
1、首先是要确定要实现滚动缩放的元素。样式代码省略了。

<div id='zoomchangebox' style='width:100px;height:100px;background:red'></div>

2、页面滚动事件的绑定与执行，此代码中设定滚动最大为原来的2倍，最小为原来的20%，并且做了滚动事件的节流处理。

//给页面绑定滑轮滚动事件
var scrollFn = function(e){
  if (window.scrollTimer) return;
    // 如果有需要阻止默认事件或事件冒泡的可以打开
    // e.preventDefault();
    // e.stopPropagation();
    window.scrollTimer = setTimeout(() => {
      e = e || window.event;
      var isGoDown = true;
      if (e.wheelDelta) { //第一步：先判断浏览器IE，谷歌滑轮事件
        if (e.wheelDelta > 0) { //当滑轮向上滚动时
          isGoDown = false;
        }
      } else if (e.detail) { //Firefox滑轮事件
        if (e.detail < 0) { //当滑轮向下滚动时
          isGoDown = false;
        }
      }
    if (isGoDown) {
      //向下滚动，执行放大元素
      zoomInFn();
    } else {
      //向上滚动，执行缩小元素
      zoomOutFn();
    }
    clearTimeout(window.scrollTimer);
    window.scrollTimer = null;
  }, 100);
};
//设定元素元大小为100；
var zoom = 100;
//缩小
var zoomInFn = function(){
  zoom -= 10;
  if (zoom < 20) {
    zoom = 20
  }
  setDivScale();
};
//放大
var zoomOutFn = function(){
  zoom += 10;
  if (zoom > 200) {
    zoom = 200
  }
  setDivScale();
};
//设置元素放大倍率样式
var setDivScale = function(){
  var scale = this.zoom / 100 ;
 document.getElementById('zoomchangebox').setAttribute('style','transform : scale(' + scale + ')');
};

//给页面绑定鼠标滚动事件
if (document.addEventListener) {//firefox
 document.body.addEventListener('DOMMouseScroll', scrollFn, false);
}
document.body.addEventListener('mousewheel', scrollFn, false);

下面补充一下CSS3中 transform 的基本用法：
可查看w3school中关于 transform 的基本介绍。https://www.w3school.com.cn/cssref/pr_transform.asp
我在这里补充一下：
1、scale缩放是按照原来元素的中心点进行缩放的。
2、缩放之后获取元素的offsetHeight和offsetWidth不改变，但是元素占据页面的尺寸有改变。
3、缩放会将元素的内边距padding、外边距margin、与边框border都会同步缩放。