商城浏览商品的滚轮事件

开发工具与关键技术：html5、css3、bootstrop、jQuery
作者：龙文浩
撰写时间：2019年6月15日

下面我们使用（onmousewheel）鼠标滚轮事件来做一个浏览商品时鼠标滚轮向下滚动的时候
，进行自动添加商品的操作，这样子达到滑动滚轮时就要识别滚轮是向上还是向下的，
接下来我们做一个测试：
我在滚轮事件处断一个点，然后鼠标滚轮向下滑动；查看页面输出的值如下：

在谷歌浏览器可以看到，鼠标滚轮向下滑动的时候，弹出 e = e || window.event; e.wheelDelta
弹出的值为-150；
然后鼠标滚轮向上滚动的时候，弹出的值为150；

然后，在这里我们不使用弹出值，直接把值输出控制器，然后一直向下滚动鼠标滚轮，看看
控制台会输出那些值呢？

可以看到，如果一直向下滚动鼠标滚轮，一直输出的值如下：
-150 -900 -750 其实，我其他时候测试的时候，还见过-450等的以150为递减的值
，如果我一直向上滑动，那又会发生什么值呢？

一直向上滚动，可以看到的值如上图，
150 300 450 等以150递增的值

那还有疑问就是，如果滑倒的头部，继续向上滑动，哪些值会是那些呢？
测试之后，可以发现，这个跟鼠标上的滚轮格子有关，
一个格子就是150，以此递增或递减

在这里抛出代码
//用于 滚轮事件
/注册事件/
if (document.addEventListener) {
document.addEventListener(‘DOMMouseScroll’, scrollFunc, false);
}//W3C
window.onmousewheel = document.onmousewheel = scrollFunc;//IE/Opera/Chrome

   //用于 滚轮事件
   var int_SelectType = 0;//用于  验证根据哪种类型查询
    var scrollFunc=function(e){
        e = e || window.event;
        console.log(e.wheelDelta);
        if (Number(e.wheelDelta) == -150) {//IE/Opera/Chrome
            //自定义事件：编写具体的实现逻辑
            if (Number(int_SelectType) == 0) {
                btn_ShowMoresByTerm();
            } else if (Number(int_SelectType) == 1) {
                btn_ShowMoreByType();
            } else if (Number(int_SelectType) == 2) {
                btn_ShowMoresByTerm2();
            }
          
        } else if (Number(e.detail) < 0) {//Firefox
            //自定义事件：编写具体的实现逻辑
            if (Number(int_SelectType) == 0) {
                btn_ShowMoresByTerm();
            } else if (Number(int_SelectType) == 1) {
                btn_ShowMoreByType();
            } else if (Number(int_SelectType) == 2) {
                btn_ShowMoresByTerm2();
            }
           
        }
    }

由于我测试的浏览器是谷歌，在其他知识手册上，我们了解到火狐浏览器的不同点
Firefox
火狐不是以150为单位递增或递减的；

火狐是以 3为单位递增或递减的；