在全屏滚动页面下实现鼠标滚轮的子级交互

godiscoder 发布于2019-08-19 17:18 / 2968人阅读

摘要：由此，我们可以完全屏蔽的默认滚动触发，改用方法控制全屏滚动，解除了全屏滚动与鼠标滚轮事件的强耦合。此外，通过定时器延时秒设置的值，将用户的鼠标滚轮操作强制分为两步，最终实现了目的。

需求分析

刚进公司产品提出一个需求：在全屏页面中滚动鼠标滚轮更新文本，回滚再恢复原文本，同时不影响全屏页面的正常切换：

初始状态

向下滚动鼠标后出现新文本

看似一个非常简单的需求，但因为这是一个使用了fullPage.js的全屏滚动页面，默认情况下滚动鼠标滚轮整个全屏页面也会随之滚动，因此解决起来还是费了一番功夫。

解决思路 引入jQuery 鼠标滚轮插件 mousewheel

因为Firefox在鼠标滚轮滚动事件上使用的API是DOMMouseScroll而非其他主流浏览器使用的onmousewheel，因此首先引入一个jQuery插件mousewheel以添加跨浏览器鼠标滚动事件的支持。

原始思路

一开始想到的方法是：当页面滚动到某一个页面时，先屏蔽fullPage.js的默认滚动触发，即把setAllowScrolling设置为false；每次手指滚动鼠标滚轮，结合文本显示的具体状态和鼠标滚轮滚动的方向再更改setAllowScrolling的值恢复整个页面的滚动。例如，当页面滚动到如上图1所示的页面时，文本是默认文本，此时应实现向上滚动切换到上一页，向下滚动切换文字；当处于上图2所示的页面时，应实现向上滚动切回原文字，向下滚动切换到下一页。可以通过自定义变量isDefaultPara纪录每次滚动鼠标后，文本处于何种状态。这种思路逻辑上是行的通的，但是存在两个问题：一是没有一个API可以反映用户“滚动了一次滚轮”，通过mousewheel插件我们可以获取的数据仅仅只有滚动的方向及滚动角度大小；二是setAllowScrolling不能选择性地屏蔽某一方向的滚动而只能全面禁止页面滚动，因此无论如何都无法实现上述例子所要达到的效果。

改进思路

查阅fullPage.js的官方文档之后，发现该插件提供了一个moveTo(section, slide)的方法函数，通过这个方法可以手动将屏幕滚动到某个section或者slide。由此，我们可以完全屏蔽fullPage.js的默认滚动触发，改用moveTo方法控制全屏滚动，解除了全屏滚动与鼠标滚轮事件的强耦合。此外，通过定时器延时1秒设置isDefaultPara的值，将用户的鼠标滚轮操作强制分为两步，最终实现了目的。

具体代码

        //在fullpage()方法中添加以下两个回调函数
        afterRender: function(){
            //页面载入后，禁止默认的鼠标滚轮滚动行为
            $.fn.fullpage.setAllowScrolling(false);
        },
        afterLoad: function(anchorLink, index){
            //此处只写出滚动到第3屏的代码，其他屏同理
            if (index == 3) {
                //判定默认文档显示状态并存入isDefaultPara变量
                var isDefaultPara = $(".default-para").is(":visible");
                $(".section").eq(2).mousewheel(function(event, delta, deltaX, deltaY){
                    switch (true) {
                        case delta<0 && isDefaultPara:
                            $(".default-para").hide().removeClass("bounceInRight");
                            $(".post-para").show().addClass("bounceInLeft");
                            //当文本出现的动画显示完全(1s后)才能进行下一步操作
                            setTimeout(function(){
                                defaultPara = false;
                            },1000);
                            break;
                        case delta>0 && isDefaultPara:
                            $.fn.fullpage.moveTo(2);
                            break;
                        case delta<0 && !isDefaultPara:
                            $.fn.fullpage.moveTo(4);
                            break;
                        case delta>0 && !isDefaultPara:
                            $(".post-para").hide().removeClass("bounceInLeft");
                            $(".default-para").show().addClass("bounceInRight");
                            setTimeout(function(){
                                firstPara = true;
                            },1000);
                        default:
                            return false;
          }

云服务器 GPU云服务器 html鼠标滚动页面鼠标滚轮鼠标滚轮事件原生js滚轮滚动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78396.html

用 ES6 写全屏滚动插件

摘要：这篇文章将介绍如何使用原生主要使用语法实现全屏滚动插件，兼容手机触屏，触摸板优化，支持自定义页面动画，压缩后文件只有。这篇文章将介绍如何使用原生 JS （主要使用 ES6 语法）实现全屏滚动插件，兼容 IE 10+、手机触屏，Mac 触摸板优化，支持自定义页面动画，压缩后 gzip 文件只有 2.15KB。完整源码在这 pure-full-page，点这查看 demo。 1）前面的话...

liuchengxu 2019-08-26 11:52 评论0 收藏0
JavaScript 笔记 —— 鼠标事件的浏览器差异

摘要：本文总结一下，鼠标事件在不同浏览器实现的差异。和相关元素差异和是级事件当中的其中两个事件。标准事件对象使用属性来识别鼠标按键。该事件当中的值与事件对象当中的作用相同。鼠标是我们在 PC 端浏览网页时候最重要的交互工具，因此鼠标事件也是 Web 开发当中最常用的一类事件。然而，由于各种原因，不同厂商或者不同版本的浏览器之间对于鼠标事件的实现也有所不同。本文总结一下，鼠标事件在不同浏览器...

haoguo 2019-08-21 10:25 评论0 收藏0
AlloyTouch全屏滚动插件发布--30秒搞定顺滑H5页

原文链接：https://github.com/AlloyTeam/AlloyTouch/wiki/AlloyTouch-FullPage-Plugin 先验货 showImg(https://segmentfault.com/img/remote/1460000007885626?w=280&h=280); 插件代码可以在这里找到。注意，虽然是扫码体验，但是AlloyTouch.FullPag...

_ivan 2019-08-21 11:21 评论0 收藏0
事件代理及常用的 HTML 事件

摘要：之前总结了事件捕获和冒泡以及阻止事件传播，今天写一下事件代理方面的总结事件之捕获冒泡阻止事件传播事件代理监听列表中多项时，实现点击控制台打印对应文本，如下苹果香蕉葡萄首先想到的对每一个进行监听或者使用和的区别是属性，是方法。之前总结了事件捕获和冒泡以及阻止事件传播，今天写一下事件代理方面的总结DOM 事件之捕获、冒泡：阻止事件传播：事件代理监听列表中多项 li 时，实现点击 li...

xavier 2019-08-23 10:57 评论0 收藏0