<script>
var scrollFunc = function (e) {
var direct = 0;
e = e || window.event;
if (e.wheelDelta) { //判断浏览器IE,谷歌滑轮事件
if (e.wheelDelta > 0) { //当滑轮向上滚动时
alert("滑轮向上滚动");
}
if (e.wheelDelta < 0) { //当滑轮向下滚动时
alert("滑轮向下滚动");
}
} else if (e.detail) { //Firefox滑轮事件
if (e.detail> 0) { //当滑轮向上滚动时
alert("滑轮向上滚动");
}
if (e.detail< 0) { //当滑轮向下滚动时
alert("滑轮向下滚动");
}
}
ScrollText(direct);
} //给页面绑定滑轮滚动事件

if (document.addEventListener) {
//webkit
document.addEventListener('mousewheel', scrollFunc, false);
//firefox
document.addEventListener('DOMMouseScroll', scrollFunc, false);

}else if(window.attachEvent){//IE
document.attachEvent('onmousewheel',scrollFunc);
}

//滚动滑轮触发scrollFunc方法
window.onmousewheel = document.onmousewheel = scrollFunc;
</script>

js给页面添加滚动事件并判断滚动方向的更多相关文章

  1. 原生js为页面添加爱心特效和判断手机端还是电脑端登录

    <!-- 为页面添加爱心特效 --> <script type="text/javascript"> (function (window, document ...

  2. js登录页面的 回车事件

    js登录页面的 回车事件 js登录页面的 回车事件(2012-12-26 10:37:03)转载▼标签: jseventkey回车事件登录 分类: js.jquery  //回车事件 第一种docum ...

  3. vue监听滚动事件,实现滚动监听

    在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...

  4. js给页面添加回车监测事件,实现回车登录功能

    document.body.addEventListener('keyup', function (e) { ') { $("#btn_login").click(); } }) ...

  5. js检测页面上一个元素是否已经滚动到了屏幕的可视区域内

    应用场景:只要页面加载了,其中在页面中出现的li就向控制台输出第几个发送请求:在本次加载的页面中,再将滚动条滚回前边的li,不再向控制台输出东西,也就是说已经显示过的li,不再向控制台输出东西. &l ...

  6. js为鼠标添加右击事件

    <script language="javascript">  /*document.oncontextmenu=Youji;*/  //为当前文档添加鼠标右击事件,防 ...

  7. JS 为任意元素添加任意事件的兼容代码

    为元素绑定事件(DOM):有两种 addEventListener 和 attachEvent:   相同点: 都可以为元素绑定事件 不同点: 1.方法名不一样 2.参数个数不一样addEventLi ...

  8. js为元素添加onclick事件

    $("div.manu a:last").on('click',function(){ if (page == totalPage) { return; } page = page ...

  9. android ScrollView滚动距离和判断滚动停止状态

    今天很高兴,自己解决了判断ScrollView滚动停止的监听,现在分享给大家. 因为ScrollView没有像listView中的setOnScrollListener()监听,当然也就没有SCROL ...

随机推荐

  1. js 抓取屏幕宽度设置字体大小 rem

    var doc = window.document var docEl = doc.documentElement var tid function refreshRem () { var width ...

  2. css-翻页

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. 数据结构-栈 C和C++的实现

    在数据结构中,栈是一种桶状结构,每次往桶里放数据,最后放的数据最先被拿出来,最先放进去的数据最后才能出来(FILO) C语言: 一.文件清单: MyStack.h: #ifndef _MYSTACK_ ...

  4. 详细介绍Spring 5的那些新特性与增强

    Spring5 是一个重要的版本,距离SpringFramework4差不多四年.在此期间,大多数增强都是在 SpringBoot 项目中完成的.在本文中,我们将很快了解到Spring5发行版中的一些 ...

  5. ORM: object relationship mapping

    ORM: object relationship mapping 关于数据库的两条命令: python manage.py makemigrations python manage.py migrat ...

  6. BZOJ 3211: 花神游历各国【线段树区间开方问题】

    3211: 花神游历各国 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 3514  Solved: 1306[Submit][Status][Discu ...

  7. 2017ICPC/广西邀请赛1001(水)HDU6181

    A Math Problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  8. 最长上升子序列(LIS经典变型) dp学习~5

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1069 Monkey and Banana Time Limit: 2000/1000 MS (Java ...

  9. ES6中promise的使用方法

    先看看ES5中异步编程的使用. let ajax = function (callBlack) { setTimeout(function () { callBlack && call ...

  10. 从零开始学习前端开发 — 12、CSS3弹性布局

    一.分栏布局 1.设置栏数column-count:数值; 2.设置每栏的宽度column-width:数值+单位; 注:当设置了column-width,column-count会失效,二者设置其一 ...