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 相关文章推荐
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
Sep 22 Javascript
jquery通过closest选择器修改上级元素的方法
Mar 17 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
jQuery实现文本框邮箱输入自动补全效果
Nov 17 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 Javascript
ExtJs整合Echarts的示例代码
Feb 27 Javascript
vue自定义filters过滤器
Apr 26 Javascript
浅谈ng-zorro使用心得
Dec 03 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 Javascript
JavaScript获取时区实现过程解析
Sep 24 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
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
解析php入库和出库
2013/06/25 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
2017/12/10 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
学习python类方法与对象方法
2016/03/15 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
Python中 map()函数的用法详解
2018/07/10 Python
对Python实现累加函数的方法详解
2019/01/23 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
Django 外键的使用方法详解
2019/07/19 Python
基于Django统计博客文章阅读量
2019/10/29 Python
python 5个实用的技巧
2020/09/27 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
港湾网络笔试题
2014/04/19 面试题
成品仓管员工作职责
2013/12/29 职场文书
地质灾害防治方案
2014/05/14 职场文书
教代会闭幕词
2015/01/28 职场文书