js判断是上滑动还是下滑动

最新推荐文章于 2024-06-11 11:19:54 发布
原创 最新推荐文章于 2024-06-11 11:19:54 发布 · 2.7k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个简单的使用JavaScript和jQuery实现的滚动监听效果。通过比较当前滚动位置与初始位置，可以判断用户是在向上还是向下滚动页面，并据此显示或隐藏某个元素。当页面滚动到顶部时，该元素将被隐藏。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

let scrollY = window.scrollY; // 初始值

$(window).on('scroll', funcation() {

      let currentY = window.scrollY;

      if(currentY  < = scroollY) { // 向下滑动

          $(element).hide()

     } else { // 向上

             $(element).show()

     }

      (currentY === 0) && $(element).hide()
      scroll = currentY

})

 

JS-移动端判断上拉和下滑
weixin_30770783的博客
07-19 2928
一、手指触屏，利用touchstart和touchend计算前后滑动距离，判断是上拉还是下滑。 二、js中距离：pageY、clientY、offsetY的区别： offsetY:相对于父节点的偏移距离。 clientY:相对于浏览器，滚轮距离不算在内。 pageY:相对于浏览器，滚轮滚动的距离算在内；本例中，用pageY，触屏时记录位置-star...
Js判断H5上下滑动方向及滑动到顶部和底部判断
weixin_33905756的博客
06-13 991
昨天一位做移动端H5开发的同事说，H5滑动方向要实时判断向下还是向上，但判断是否滑动到底部时判断有问题一直没解决，于是就去问度娘，搜了很多资料，大部分有重复，于是根据大家的资料借鉴学习，在大家的基础上写了一个小例子。功能主要时可以实时的判断上下滑动的方向，是否滑动到底部或顶部来做某些事件触发。例子中有使用到其他博客上的内容，如原作者看到请勿怪，如果例子中有错误的请大...
通过 JS 判断页面是否有滚动条的实现方法
10-18
最近在写插件的过程中，需要使用 JS 判断是否有滚动条，搜了一下，大致方法都差不多，但都有些啰嗦，代码不够简洁。最终通过参考不同方法，写了一个比较简单的方法
js判断手指上滑和下滑
Cool的博客
08-03 9194
&lt;script&gt; var startX = 0, startY = 0; function touchStart(evt){ try{ var touch = evt.touches[0], //获取第一个触点 x = Number(touch.pageX), //页面触点...
js判断手指的上滑，下滑，左滑，右滑，事件监听 和 判断鼠标滚轮向上滚动滑轮向下滚动
夜空孤狼啸的博客
08-18 3832
/ touchcancel: //系统取消touch事件的时候触发，这个好像比较少用。console.log(wheelDelta + ‘滑轮向上滚动’);console.log(wheelDelta + ‘滑轮向下滚动’);// touchmove: //手指在屏幕上滑动式触发。// touchstart: //手指放到屏幕上时触发。// touchend: //手指离开屏幕时触发。//火狐使用DOMMouseScroll绑定。//其他浏览器直接绑定滚动事件。
原生JS判断向上或向下滑动
羽筠的博客
01-05 1384
原生JS判断向上或向下滑动，可根据结果设置进入上一页或下一页操作 // 判断向上或向下滑动 // ifPrevent 是否阻止事件默认行为 function getTouchType(element,ifPrevent,callback){ var startY , endY , diff; element.addEventListener("touchstart", touchStart, false); element.addEventListener("touchmove", touchM.
JS实现移动端判断上拉和下滑功能
10-19
在移动设备上，为了提供更好的用户体验，我们常常需要检测用户是向上滑动还是向下滑动。这在诸如无限滚动、加载更多数据等场景中尤为重要。本文将详细介绍如何使用JavaScript实现这个功能，主要涉及touchstart和...
动画效果随鼠标向下滑动而加载
09-18
5. **兼容性处理**：确保动画在不同的浏览器和设备上都能正常工作，可能需要针对旧版浏览器进行polyfill或提供降级方案。 总结来说，“动画效果随鼠标向下滑动而加载”是一项结合了用户交互、动画技术和智能加载...
原生JS实现移动端上下滑动一次一屏（仿抖音）
qq_48972217的博客
06-14 3254
功能如下: 头部： 附近、关注、推荐选项卡的切换 左右滑动功能、头部选项卡跟随动画 上下滑动划动一屏，滑动超过头部刷新 双击选项卡回到顶部 完美注释~ 上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
JS使用IF方法判读鼠标滚轴向下还是向上。【特别简单版本】
m0_57927664的博客
05-17 423
使用 window.scroll 提供的基本知识，来判断鼠标上或者是下的动作。
JS判断移动端上拉和下滑
flowRight的博客
11-28 2824
根据触碰屏幕开始时候的坐标位置和结束时候在竖直方向（Y轴）的坐标位置，判断方式是上拉还是下滑 var startY; //定义开始时候的坐标位置 document.addEventListener('touchstart',function (ev) { startY = ev.touches[0].pageY; }, false); docume...
JavaScript判断浏览器向上或者向下滚动
Eiwen的博客
03-07 3433
/*** * 监听滚动事件，判断滚动方向 * ***/ var Before_scollH = 0; $(window).on('scroll', function () { var After_scollH = $(window).scrollTop(); var differH = After_scollH - Bef...
js怎样判断鼠标向下滚动还是向上滚动
04-29 4087
有时候需要用JS监听鼠标是往下还是往上滚动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...
原生js判断滚动条上下方向，js简单判断页面滚动条滚动方向
huang_rui_min的博客
06-09 1913
原生js简单判断页面滚动条方向是向上还是向下
关于js滚动的相关判断
nick_zhang的博客
05-27 2873
window.addEventListener(‘scroll’,this.scrollToTop) // 对文档中某一处元素的scroll事件@scroll=“handleScroll($event)”,把document换成e.target let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; let clientHeight = window.innerHeight || document.d
web移动前端页面，jquery判断页面滑动方向
IT_Ping的博客
10-15 617
/*判断上下滑动：*/  $('body').bind('touchstart',function(e){         startX = e.originalEvent.changedTouches[0].pageX;         startY = e.originalEvent.changedTouches[0].pageY;     });     $("body").bind("to...
集训第十天--移动端判断向上还是向下滑动
weixin_45822952的博客
10-31 516
主要用到了移动端的三个事件 touchstart touchmove touchend 当用户的手指触碰到该屏幕时，获取到用户触碰到该点的pageY的位置 （要通过e.touches[0].pageY来获取） 当用户移动点的时候 再一次获取 y轴的偏移位置 减去第一次 就等于用户滑动屏幕的差值 然后再判断这个值 如果为正数则下滑动 如果为负数则是向上滑动 详细代码见下 var startY = 0,moveY = 0 function pages(obj1, obj2) ..
原生js实现判断浏览器滚动条向上滚动还是向下滚动，实时监听浏览器的滚动方向
Sunny_lxm的博客
08-28 1820
原生js实现判断浏览器滚动条向上滚动还是向下滚动
前端JS必用工具【js-tool-big-box】学习，获取当前浏览器向上滚动还是向下滚动，获取当前距离顶部和底部的距离
最新发布
xingyu_qie的专栏
06-11 1589
添加的最新工具方法，在日常前端开发工作中，如果网页很长，我们就需要获取当前浏览器是在向上滚动，还是向下滚动。如果向上滚动，滚动到0的时候呢，需要做一些操作；如果浏览器是在乡下滚动，如果滚动到底部有一定距离的时候呢，也需要做一些操作。例如距离底部还差200px的时候呢，我们就可以提前请求下一页数据拉，不至于滚动到0的时候再请求，那就会有点晚，让用户等很久。
实现手机端页面上下滑动的动态加载技术
### 手机端上滑下滑动态加载页面知识点解析 #### 1. 动态加载页面的概念 动态加载页面指的是在用户浏览网页时，通过编程手段，根据用户的操作（如滚动、点击等）动态地从服务器请求数据并更新网页内容，而不是一次...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值