使用原生JS实现滚轮翻页效果的示例代码


Posted in Javascript onMay 31, 2020

一、滚轮事件

当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时,就会触发mousewheel事件,这个事件就是实现全屏切换效果需要用到的。在IE6, IE7, IE8, Opera 10+, Safari 5+中,都提供了 “mousewheel” 事件,而 Firefox 3.5+ 中提供了一个等同的事件:”DOMMouseScroll”。与mousewheel事件对应的event对象中我们还会用到另一个特殊属性—wheelDelta属性。

1、“mousewheel” 事件中的 “event.wheelDelta” 属性值:返回的值,如果是正值说明滚轮是向上滚动,如果是负值说明滚轮是向下滚动;返回的值,均为 120 的倍数,即:幅度大小 = 返回的值 / 120。

2、“DOMMouseScroll” 事件中的 “event.detail” 属性值:返回的值,如果是负值说明滚轮是向上滚动(与 “event.wheelDelta” 正好相反),如果是正值说明滚轮是向下滚动;返回的值,均为 3 的倍数,即:幅度大小 = 返回的值 / 3。

二、实现效果

使用原生JS实现滚轮翻页效果的示例代码 

三、源代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      overflow: hidden;
    }
    .container {
      transition: .5s;
    }
    .item {
      width: 100vw;
      height: 100vh;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item" style="background-color: rgb(255,255,0)"></div>
    <div class="item" style="background-color: rgb(255, 145, 0)"></div>
    <div class="item" style="background-color: rgb(0, 17, 255)"></div>
    <div class="item" style="background-color: rgb(0, 255, 136)"></div>
  </div>
  <script src="sun.js"></script>
  <script src='https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js'></script>
  <script>
    $(() => {
      let i = 0;
      let move = sun.throttle(e => {
        if(e.wheelDelta < 0) {
          if( i === $(".item").length - 1) return ;
          i++;
        } else {
          if( i === 0) return;
          i--;
        }
        $(".container").css("transform",`translateY(-${i*100}vh)`);
      },500);
      window.onmousewheel = move;
    })
  </script>
</body>
</html>

其中用到了节流函数 throttle() ,函数代码如下:

function throttle(fn,wait) {
    let endTime = 0;
    return function() {
      if(new Date() - endTime < wait) return;
      fn.apply(this,arguments);
      endTime = new Date();
    }
  },

到此这篇关于使用原生JS实现滚轮翻页效果的示例代码的文章就介绍到这了,更多相关JS滚轮翻页内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery简单体验
Jan 10 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
Dec 12 Javascript
jQuery弹性滑动导航菜单实现思路及代码
May 02 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
May 24 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 Javascript
JavaScript中的Proxy对象
Nov 27 Javascript
24个ES6方法解决JS实际开发问题(小结)
May 31 #Javascript
公众号SVG动画交互实战代码
May 31 #Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 #Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 #Javascript
详解Typescript 内置的模块导入兼容方式
May 31 #Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 #Javascript
JQuery获得内容和属性方法解析
May 30 #jQuery
You might like
php 更新数据库中断的解决方法
2009/06/05 PHP
PHP 查找字符串常用函数介绍
2012/06/07 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
Javascript注入技巧
2007/06/22 Javascript
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
JavaScript 继承详解(三)
2009/07/13 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
python实时检测键盘输入函数的示例
2019/07/17 Python
python爬虫增加访问量的方法
2019/08/22 Python
python elasticsearch环境搭建详解
2019/09/02 Python
python环境下安装opencv库的方法
2020/03/05 Python
Python smtp邮件发送模块用法教程
2020/06/15 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
程序员岗位职责
2013/11/11 职场文书
酒店副总岗位职责
2013/12/24 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
小王子读书笔记
2015/06/29 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书