通过鼠标滚轮放大 缩小图片，同时防止滚轮事件 影响body的滚动条

上篇文章中，我最里层的图片 要支持鼠标滚轮 放大缩小图片
放大缩小图片很简单，但是当我移动滚轮的时候，发现滚轮的事件冒泡出去了
自动触发了body或者div的滚动条，页面晃动个不停

最终做到了当鼠标移到图片上时，仅放大 缩小图片，不触发外部的滚动条
功能代码如下

//滚动条 
        const imgView = document.querySelector('.laser-img')
        let widthStep=10
        imgView.onmouseover = (e1) => {
            if (e1.target.nodeName === "IMG") {
                var img = e1.target;
                var widthW = img.width;

                // 鼠标滚动事件
                img.onmousewheel = (e) => {
                    // wheelDelta 判断滚轮往前滚还是往后滚：   <0 是往后滚， >0是前滚
                    e.wheelDelta < 0 ? widthW -= widthStep : widthW += widthStep;
                    //修改图片宽度
                    $('.laser-img').attr('style', 'width:' + widthW + 'px')
                    e.stopPropagation()
                    let h = img.height
                    let w = widthW
                    // 修改父窗口div容器的宽高(如果用的话,可不用)
                    $('.imgOuter').attr('style', 'height:' + h + 'px !important; width: ' + w + 'px!important')
                  
					//优化滚动条逻辑，当鼠标放在img上时，外部的div滚动条不生效
					//如 div、body的滚动条不跟随图片放大缩小而移动
                    if (!e) e = window.event;
                    this.scrollTop = this.scrollTop - (e.wheelDelta ? e.wheelDelta : -e.detail * 10);
                    return false; 


                };
            }
            return false
        };

同时放一篇文章 博主解决的我的麻烦(留着以后备查)…
body 中某个 div 滚动，防止冒泡到 body 滚动
方案 1：当鼠标移入 div 时，设置 body 的 overflow 为 hidden，移出时候，设置 overflo 为 auto

方案 2：

div.on(“mousewheel”, “.nav-menus”, function (e) {
$(this).scrollTop($(this).scrollTop() - e.originalEvent.wheelDelta);
return false;
});
参考代码

document.getElementById(‘side’).onmousewheel = function(event) {
if (!event) event = window.event;
this.scrollTop = this.scrollTop - (event.wheelDelta ? event.wheelDelta : -event.detail * 10);
return false;
}
来源：v2eX @abelyao
链接如下
https://my.oschina.net/u/1417838/blog/1609659