判断滚动条向上还是向下
经常会遇到的以下情形:
导航向下滚就隐藏,向上滚动就显示
实现滚动动画效果:向下滚动 左右两边的内容向中间移动,而向上滚动 两个内容又退回到左右两边;又或者向下滚动canvas放大,反之缩小
这些动画原理当知少不了scrollTop()函数;
scrollTop() 定义和用法
scrollTop() 方法设置或返回被选元素的【垂直滚动条位置】。
Note:
当滚动条位置位于最顶部时,位置是0;
当用于返回位置时:
该方法返回 第一个匹配元素的滚动条的垂直位置。语法: ( s e l e c t o r ) . s c r o l l T o p ( ) 当 用 于 设 置 位 置 时 : 该 方 法 设 置 所 有 匹 配 元 素 的 滚 动 条 的 垂 直 位 置 。 语 法 : (selector).scrollTop() 当用于设置位置时: 该方法设置 所有匹配元素的滚动条的垂直位置。语法: (selector).scrollTop()当用于设置位置时:该方法设置所有匹配元素的滚动条的垂直位置。语法:(selector).scrollTop(position) 参数position : 规定以像素为单位的垂直滚动条位置。
如何判断是up还是down
var a;
function scroll( fn ) {var beforeScrollTop = document.body.scrollTop,fn = fn || function() {};window.addEventListener("scroll", function() {var afterScrollTop = document.body.scrollTop,delta = afterScrollTop - beforeScrollTop;if( delta === 0 ) return false;fn( delta > 0 ? "down" : "up" );beforeScrollTop = afterScrollTop;}, false);}//第一种写法scroll(function(direction) {// console.log(direction);a = direction;});//第二种写法执行完事件后的回调函数function fn(direction) {// console.log(direction);a = direction;};window.onscroll=function(){console.log(a);}
来解决以上情形
通过判断向上或者向下,后,就是原理问题;
案例~~~~滚动内容往中间或两边移动效果
原理:先给元素设置一个left值让其隐藏,当滚动条到一定位置,改变其left值让其出现。改变幅度与滚动幅度正相关。透明度那个也是同理
复制代码
Hello World
判断滚动条向上还是向下相关推荐
- jq判断滚动条向上还是向下
$(document).ready(function(){ var p=0,t=0; $(window).scroll(function(e){ p = $(this).scrollTop(); if ...
- 鼠标滚轮的滚动事件,判断鼠标向上还是向下滚动
代码: JS // 鼠标滚动事件windowAddMouseWheel() {let that = this;var scrollFunc = function (e) {e = e || windo ...
- php向下滑动,js如何判断鼠标滚轮是向下还是向上滚动
判断鼠标滚轮是向上或向下滚动,不同的浏览器的判别方式是不一样的,当前比较流行的浏览器有 IE,Opera,Safari,Firefox,Chrome,在这个问题上Firefox和其他浏览器的实现方式是 ...
- 判断滚动条是否到某个位置,还有滑动的方向,以此来判断什么时候阻止滚动条滚动...
<script type="text/javascript"> // 防止内容区域滚到底后引起页面整体的滚动 var content = document.queryS ...
- 如何统计钣金文档中向上和向下折弯的个数
前段时间在在Autodesk Inventor论坛解答了一个问题,觉得对钣金操作的开发者有用,现总结于此. 钣金里折弯是很常用的特征.而折弯基于基准面方向,可能向上,也可能向下.而实际生产中,需要知道 ...
- 向上(向下)转型的理解与应用
58.向上(向下)转型 向上转型:父类的引用指向子类对象,自动进行类型转换 <父类型><引用变量名>=new<子类型>() 通过父类引用变量调用的方法是子类覆盖或继 ...
- js实现判断滚动条滚到页面底部并执行事件的方法
这里我主要介绍JS实现判断滚动条滚到页面底部并执行事件的方法: 需要了解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个 ...
- JS判断滚动条到底部
form:http://www.uphtm.com/js/269.html判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. sc ...
- python(matplotlib4)——Scatter 散点图,Bar柱状图(方向:向上,向下),柱状图添加注释
文章目录 前言 scatter 散点图 Bar柱状图(方向:向上,向下) 前言 来自 莫烦python的总结. scatter 散点图 n =500 X = np.random.normal(0,1, ...
最新文章
- 操作系统原理第六章:进程同步
- 31 socket客户端. 服务器 异常 语法
- Ubunt中卸载protobuf与安装3.6.0版本步骤
- WCF安全之ASP.NET兼容模式
- Shiro过滤器配置(ShiroFilterFactoryBean)
- 鸿蒙分布式体验,一张图看懂鸿蒙OS 2.0 分布式能力升级构筑全场景体验
- django 别名与命名空间 reverse反转得到路径
- 剑指前端(前端入门笔记系列)——数组(基本语法)
- c语言常用算法分析 微盘,C语言常用算法归纳.pdf
- (转) 数字加密货币全球资源汇总
- mysql 递归查询_Mysql递归查询,无限级上下级菜单
- python句柄无效_作为Windows服务运行的Python:OSError:[WinError 6]句柄无效
- 新生儿住月子中心20天患败血症 什么是败血症?有哪些危害
- LaTex用模板的时候图片的caption标题无法左对齐
- 【java学习】集合框架
- QImage 32bit转8bit
- 游戏运营创业——个人如何选择手游平台?
- html旅游门票源代码,票务网站整套静态模板 HTML模板
- 初学者:英语和数学不好,能学编程吗?
- 陕西科技大学计算机专业课表,陕西科技大学教务管理系统入口:http://jwc.www.sust.edu.cn/...