踩坑日记 – 鼠标滚动来翻页

ps: 来自设计人员的灵魂需求。

设计小姐姐：我想用鼠标滚动实现此处新闻测试的翻页。

本程序员（嘴巴）：好的，有可以参考的页面吗？

本程序员（内心）：没听过啊，什么鬼玩意。

设计小姐姐：很简单的啦，鼠标往上滚动的时候，新闻就逐层向上翻页，翻到尽头，页面就向上滚动，同理，鼠标往下滚动的时候，新闻就逐层向下翻页，翻到尽头，页面就向下滚动。

本程序员（嘴巴）：好的呢，讲的很清楚，我听懂了，应该不难。

本程序员（内心）：你当那是PPT吗，还翻页，要不我给你做个动画24h循环播放。鬼知道怎么做啊。

口嫌体正，做还是得做的，正好写篇踩坑日记。

破局点在哪呢？

破局点在于变化，页面滚着滚着就不能滚了，新闻翻着翻着，页面又开始滚动了。

自信的我连忙查起了鼠标滚轮事件的资料，

MDN：developer.mozilla.org/zh-CN/docs/…

看了一会，一头雾水，好吧，是我没有自知之明了，我降低一下对自己的要求，搜搜相关滚轮事件的demo把。果然，适合我这种的还是这样的demo。

blog.csdn.net/wxl1555/art…

www.cnblogs.com/hackerPJ/p/…

用这个demo进行了一下实验，发现只有鼠标在指定元素内，才可以进行相关的滚动操作，比如你禁用了B元素的滚轮事件，但你是由兄弟元素A（A在B元素前），你焦急地滚动了好多下，是可以直接划过B元素(那个被我们禁用了滚轮事件的元素)。

但瑕不掩瑜把，按这个思路解决的话，我们假设用户的鼠标直接在我们的B元素内，此时，我们根据当前新闻的下标和滚轮的方向来判断B元素的滚轮事件应被禁止。比如第一条新闻，向上滚动，以及最后一条新闻，向下滚动 都不应该被禁止。

踩坑痛点：

事件流、WebAPI参考接口

无论你觉得你行还是不行，你都是绝对正确的。

合影留恋~