JS简单判断滚动条的滚动方向实现方法


Posted in Javascript onApril 28, 2017

本文实例讲述了JS简单判断滚动条的滚动方向实现方法。分享给大家供大家参考,具体如下:

以下代码实现判断页面的滚动条的滚动方向;

var sign = 80;//定义默认的向上滚与向下滚的边界
window.onscroll = window.onresize = function(){
    var oScrollTop=$(window).scrollTop();
    if ( oScrollTop > 80) {



//write your code
    }
    if ( oScrollTop < 80) {



//write your code


}
    if ( oScrollTop > sign) {
      sign = oScrollTop;//更新scrollTop
      //console.log('向下');
    }
    if ( oScrollTop< sign) {
      sign = oScrollTop//更新scrollTop
      //console.log('向上');
    }
}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
jQuery 第二课 操作包装集元素代码
Mar 14 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
js中for in的用法示例解析
Dec 25 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
js自定义QQ菜单效果
Jan 10 Javascript
简单实现AngularJS轮播图效果
Apr 10 Javascript
vue中添加mp3音频文件的方法
Mar 02 Javascript
5分钟快速掌握JS中var、let和const的异同
Sep 19 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 #Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 #Javascript
jquery实现图片上传前本地预览
Apr 28 #jQuery
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 #Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 #Javascript
JS组件系列之JS组件封装过程详解
Apr 28 #Javascript
JS实现的Unicode编码转换操作示例
Apr 28 #Javascript
You might like
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
php错误日志简单配置方法
2016/07/11 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
JavaScript 面向对象之命名空间
2010/05/04 Javascript
怎么清空javascript数组
2013/05/11 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
python机器学习之神经网络(二)
2017/12/20 Python
python实现浪漫的烟花秀
2019/01/30 Python
Python数据分析pandas模块用法实例详解
2019/11/20 Python
python自动识别文本编码格式代码
2019/12/26 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
公司清洁工岗位职责
2013/12/14 职场文书
趣味运动会开幕词
2015/01/28 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
海底两万里读书笔记
2015/06/26 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript