<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. Send Email in .NET Core 2.0

    在.NET Core 1.0 中,SMTP Client代码并没有被移植,直到.NET Core 2.0的发布.使用下面的代码: static void Main(string[] args) { S ...

  2. 在webstorm开发微信小程序之使用阿里自定义字体图标

    1.下载阿里图标,解压出来之后有个.css文件 然后复制这css里面的所有代码 2.新建一个wxss文件,例如我新建的就是iconfont.wxss,然后把刚才复制的所有代码,复制到这个文件里面去. ...

  3. CSS3 动画 cheatsheet

    Transition 实例 .box { height: 100px; width: 100px; background: #212121; transition: width 1s ease, he ...

  4. 用Vue中遇到的问题和处理方法

    用Vue开发项目有一段时间,在实际项目中遇到一些问题,在里把问题记录下来,并附上解决方案,给遇到同样的问题的码友提供一个解决思路吧: 测试部抛出问题一:在Vue1.0路由vue-router中,当点击 ...

  5. Android 线程_笔记

    多线程 一.为什么要使用多线程 1.提高用户体验或避免ANR 在事件处理代码中需要使用多线程,响应时间超过5s,即会出现ANR(Application is not responding),并因为响应 ...

  6. 【JavaScript_DOM 百度搜索框】

    今天给大家带来的事一个简单的百度的历史搜索框,大家在搜索东西的时候,百度会自动给你显示你最近搜索过的一些东西,那这个拿js怎么做呢? 我们一起来学习吧 这是一个HTML页面: <!DOCTYPE ...

  7. RAC+ASM 添加控制文件

    环境介绍:11g RAC 使用 ASM 磁盘组,控制文件只有一个,需要进行添加 参照 MOS 文档 How to Multiplex Control File In RAC Database (文档 ...

  8. [bzoj1700]: [Usaco2007 Jan]Problem Solving 解题

    不能贪心!不能贪心!不能贪心! 反正有反例(有的题目月初支付款很少,月末支付款很大,和前面的题凑到一个月的话可能导致下个月写不了= =这时放后一个月,和后面的题一起开始写可能更优) 比如: 50 44 ...

  9. webpack的安装与使用

    在安装 Webpack 前,你本地环境必须已安装nodejs. 可以使用npm安装,当然由于 npm 安装速度慢,也可以使用淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像. 使 ...

  10. Android简介(一)

    Android构架 Android的系统架构和其操作系统一样,采用了分层的架构.从架构图看,android分为四个层,从高层到低层分别是应用程序层.应用架构层.系统运行库层和Linux核心层. 1. ...