boss说中午盒饭加鸡腿系列——鼠标滚动禁用效果小结

美国军舰又撞了啊哈哈哈，川普你还好吗？

公司委派的任务被卡在如何禁用鼠标滚轮并且效果完成之后要恢复鼠标滚轮功能上，老实说这真的难倒了我，以至于周末忧心忡忡，思考了很多办法，终不可解，今天终于得以解决，开心之余，觉得应该将我的办法写给那些同样被难倒的同志们。特此留文，以备后查！

---

讲思路之前，我先分享一个tip——我发现了想问题思路的思路

• 之前：微观==>微观。即遇到bug总是先头脑风暴，然后想到什么方法就去搜，这种方法很实用很简便，但是真心浪费时间，因为在你真正实践之前，你永远不知道这个方法是否是最简单，最有效的。

• 下一次你可以试试这种方法：宏观==>微观。先整体上分析存在哪些方法（这个时候不要去想细节，更不要去想可行性，只要有可能解决问题的，统统记下来），然后逐项分析查证。

---

• 下面是我分析的可能存在问题或者解决的方向：

  1. 增加一个事件绑定（禁用鼠标滚轮），然后在效果实现之后删除这个事件绑定（解禁鼠标滚轮）；

  2. 状态锁；

  3. setTimeout( )；

  4. ......

---

• ok，接下来开始逐项分析

  1. 关于事件绑定
     在react中，由于作用域被重新改写，使得addEventListener()和removeEventListener()这两个事件API并没有我想的那么简单，具体解释，就是removeEventListener()接受一个非匿名函数，即可达到解绑事件的目的，这时的this是事件柄（调用这个API的元素）。但是为了使用其他的功能，又必须让this变成react中的作用域。就好像要求一根网线链接美国，有同时链接中国，而网线只有一条。这很尴尬，只能废弃！

  2. 状态锁
     经过试验不可行，也没有什么知识点，不讲！

  3. setTimeout( )
     实现原理是当页面滚动到触发条件时，先禁用鼠标滚动功能，然后过0.5秒之后滚动页面到特定位置。（这真的只是看上去很简单）
     参考链接
     实现代码如下：

if (0 < startTop < 1) {

      //过0.5秒在滚动页面到指定位置
      setTimeout(function() {
        scrollToComponent(document.body, {
        offset: bannerHeight,
        align: 'top',
        duration: 700
        })
      }, 500);

      //禁用滚动功能（火狐浏览器同样兼容）
      document.getElementById('playBanner').onmousewheel = function scrollWheel(e) {
        e = e || window.event;
        if (navigator.userAgent.toLowerCase().indexOf('msie') >= 0) {
            event.returnValue = false;
        } else {
            e.preventDefault();
        };
      }

}

THE END