Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
转载 & & 作者：左上角的天空
下面小编就为大家分享一篇Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
向上滑动隐藏底部悬浮框，向下滑动显示悬浮框。使用pc端浏览器查看请把浏览器设置为手机浏览器模式。
&!DOCTYPE HTML&
&meta charset="utf-8"&
&title&手机端触屏手指滑动方向&/title&
&meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no,maximum-scale=1.0" id="viewport" name="viewport"&
&script type="text/javascript"&
var currntY = 0;
var lastY = 0;
var touch_screen = {
　　 //方向
direction: {
direction: "",
object: null,
start: function() {
var self = this,
obj = self.
obj.addEventListener('touchstart', function(e) {
self.move();
}, false);
obj.addEventListener('touchend', function(e) {
//self.move();
lastY = document.body.scrollT
}, false);
//拖动滑动时
move: function() {
var self =
self.object.addEventListener('touchmove', function(e) {
currntY = document.body.scrollT
var direct = currntY - lastY;
if (direct & 0) {
self.direction = "down";
document.getElementById("nav").style.visibility="hidden";//隐藏
} else if (direct & 0) {
self.direction = "up";
document.getElementById("nav").style.visibility="visible";//显示
if(currntY == 0){
self.direction = "top";
} else if((currntY + window.screen.availHeight) == document.body.clientHeight){
self.direction = "bottom";
document.getElementById("nav").style.visibility="visible";//显示
document.getElementById('nav').innerHTML= self.
//document.getElementById('nav').innerHTML= currntY + "|" + window.screen.availHeight + "|" + document.body.clientH
lastY = document.body.scrollT
}, false);
//通过一个dom对象进行初始化
init: function(a) {
var class_clone = function(source) {
var result={};
for (var key in source) {
result[key] = typeof source[key]==="object" ? class_clone(source[key]) : source[key];
var self = class_clone(touch_screen.direction);
self.object = document.getElementById(a);
if (!self.object) {
alert('bind_object is not an object');
self.start();
//页面加载完成
window.onload = function() {
touch_screen.direction.init("inner");
* {margin: 0; padding: 0;}
#outer{ width:90%; height: 100%; background: #000; margin: overflow:}
#inner{width:80%; background: #e4e4e4; margin: position: top:0 font-size: 1 padding: 30px 10 }
#inner p{line-height: 30 letter-spacing: 3 text-indent:2}
#nav { width:100%; height: 50 border: 1px solid #D4CD49; background: #947674;text-align: position:left:0;bottom:0; }
#nav2 { width:100%; height: 50 border: 1px solid #D4CD49;background: #947674;}
h2{ width: 100%; text-align: }
h3{ width: 100%; padding-left:60%;}
&div id="spText2"&&/div&
&div id="outer"&
&div id="inner"&
&h2&背影&/h2&
&h3&—朱自清&/h3&
&p&我与父亲不相见已二年余了，我最不能忘记的是他的背影。
那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子。我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲,看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说：“事已如此，不必难过，好在天无绝人之路！”
回家变卖典质，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨淡，一半为了丧事，一半为了父亲赋闲。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。
到南京时，有朋友约去游逛，勾留了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖；颇踌躇了一会。其实我那年已二十岁，北京已来往过两三次，是没有什么要紧的了。他踌躇了一会，终于决定还是自己送我去。我再三回劝他不必去；他只说：“不要紧，他们去不好！”
我们过了江，进了车站。我买票，他忙着照看行李。行李太多了，得向脚夫行些小费才可过去。他便又忙着和他们讲价钱。我那时真是聪明过分，总觉他说话不大漂亮，非自己插嘴不可，但他终于讲定了价钱；就送我上车。他给我拣定了靠车门的一张椅子；我将他给我做的紫毛大衣铺好座位。他嘱咐我路上小心，夜里要警醒些，不要受凉。又嘱托茶房好好照应我。我心里暗笑他的迂；他们只认得钱，托他们只是白托！而且我这样大年纪的人，难道还不能料理自己么？
我说道：“爸爸，你走吧。”他望车外看了看，说：“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。父亲是一个胖子，走过去自然要费事些。我本来要去的，他不肯，只好让他去。我看见他戴着黑布小帽，穿着黑布大马褂，深青布棉袍，蹒跚地走到铁道边，慢慢探身下去，尚不大难。可是他穿过铁道，要爬上那边月台，就不容易了。他用两手攀着上面，两脚再向上缩；他肥胖的身子向左微倾，显出努力的样子。这时我看见他的背影，我的泪很快地流下来了。我赶紧拭干了泪。怕他看见，也怕别人看见。我再向外看时，他已抱了朱红的橘子往回走了。过铁道时，他先将橘子散放在地上，自己慢慢爬下，再抱起橘子走。到这边时，我赶紧去搀他。他和我走到车上，将橘子一股脑儿放在我的皮大衣上。于是扑扑衣上的泥土，心里很轻松似的。过一会儿说：“我走了，到那边来信！”我望着他走出去。他走了几步，回过头看见我，说：“进去吧，里边没人。”等他的背影混入来来往往的人里，再找不着了，我便进来坐下，我的眼泪又来了。
近几年来，父亲和我都是东奔西走，家中光景是一日不如一日。他少年出外谋生，独力支持，做了许多大事。哪知老境却如此颓唐！他触目伤怀，自然情不能自已。情郁于中，自然要发之于外；家庭琐屑便往往触他之怒。他待我渐渐不同往日。但最近两年不见，他终于忘却我的不好，只是惦记着我，惦记着我的儿子。
我北来后，他写了一信给我，信中说道：“我身体平安，惟膀子疼痛厉害，举箸提笔，诸多不便，大约大去之期不远矣。”我读到此处，在晶莹的泪光中，又看见那肥胖的、青布棉袍黑布马褂的背影。唉！我不知何时再能与他相见！ &/p&
&div id="nav" style="color:#F00; font-size:35px"&&/div&
&div id="nav2" &&/div&
以上这篇Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具1769人阅读
Android（3）
Android ScrollView监听滑动到顶部和底部，虽然网上很多资料都有说，但是不全，而且有些细节没说清楚
使用场景：
1. 做一些复杂动画的时候，需要动态判断当前的ScrollView是否滚动到底部或者顶部
2. ScrollView滚动到顶部或者底部时主动触发一些操作（典型的就是滚动到底部触发自动加载操作）
两种方式：
1. onScrollChanged方式，自己计算
2. onOverScrolled使用系统计算的结果，api &= 9才支持
可能忽视的细节1：
如果是手势滑动，上面两种方式都对，但是如果是调用ScrollView的smoothScrollTo和scrollTo方法来滚动的话，
只有onScrollChanged监听对，onOverScrolled监听不对，因为通过代码来滚动话是精确滚动，onOverScrolled方法没处理这种情况
两种方式如何选择？
一般来说如果系统有实现的东西，就用系统的，我们毕竟是基于Android系统来做开发，别人做的考虑很多适配兼容问题
所以原则就是：系统有就用它的，没有才用我们自己的，具体实现仔细看代码，记得看注释
如果不考虑smoothScrollTo和scrollTo滚动，上面这个原则就是对的，如果要考虑的话，这里只能使用onScrollChanged
滚动到顶部和底部时对应的计算关系：
备注：无padding的情况可以转换为有padding的情况，即tp,bp=0
mScrollY + H – tp – bp = h ===& mScrollY + H = h
代码实现，自定义View，可以直接拷贝就可以使用
下面代码不考虑smoothScrollTo和scrollTo方法的影响，要考虑的话，去掉onOverScrolled方法，去掉onScrollChanged的api版本条件限制即可
import android.content.C
import android.util.AttributeS
import android.widget.ScrollV
* 监听ScrollView滚动到顶部或者底部做相关事件拦截
public class SmartScrollView extends ScrollView {
private boolean isScrolledToTop = true;　　// 初始化的时候设置一下值
private boolean isScrolledToBottom = false;
public ScanScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
private ISmartScrollChangedListener mSmartScrollChangedL
/** 定义监听接口 */
public interface ISmartScrollChangedListener {
void onScrolledToBottom();
void onScrolledToTop();
public void setScanScrollChangedListener(ISmartScrollChangedListener smartScrollChangedListener) {
mSmartScrollChangedListener = smartScrollChangedL
protected void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolean clampedY) {
super.onOverScrolled(scrollX, scrollY, clampedX, clampedY);
if (scrollY == 0) {
isScrolledToTop = clampedY;
isScrolledToBottom =
isScrolledToTop =
isScrolledToBottom = clampedY;
notifyScrollChangedListeners();
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
if (android.os.Build.VERSION.SDK_INT & 9) {
// API 9及之后走onOverScrolled方法监听
if (getScrollY() == 0) {
// 小心踩坑1: 这里不能是getScrollY() &= 0
isScrolledToTop =
isScrolledToBottom =
} else if (getScrollY() + getHeight() - getPaddingTop()-getPaddingBottom() == getChildAt(0).getHeight()) {
// 小心踩坑2: 这里不能是 &=
　　　　　　　　　// 小心踩坑3（可能忽视的细节2）：这里最容易忽视的就是ScrollView上下的padding　
isScrolledToBottom =
isScrolledToTop =
isScrolledToTop =
isScrolledToBottom = false;
notifyScrollChangedListeners();
// 有时候写代码习惯了，为了兼容一些边界奇葩情况，上面的代码就会写成&=,&=的情况，结果就出bug了
// 我写的时候写成这样：getScrollY() + getHeight() &= getChildAt(0).getHeight()
// 结果发现快滑动到底部但是还没到时，会发现上面的条件成立了，导致判断错误
// 原因：getScrollY()值不是绝对靠谱的，它会超过边界值，但是它自己会恢复正确，导致上面的计算条件不成立
// 仔细想想也感觉想得通，系统的ScrollView在处理滚动的时候动态计算那个scrollY的时候也会出现超过边界再修正的情况
private void notifyScrollChangedListeners() {
if (isScrolledToTop) {
if (mSmartScrollChangedListener != null) {
mSmartScrollChangedListener.onScrolledToTop();
} else if (isScrolledToBottom) {
if (mSmartScrollChangedListener != null) {
mSmartScrollChangedListener.onScrolledToBottom();
public boolean isScrolledToTop() {
return isScrolledToT
public boolean isScrolledToBottom() {
return isScrolledToB
至此已经介绍完了，为了形象的表示smoothScrollTo和scrollTo方法调用时两种监听方式的结果，下面加上log，这里不想看的可以不往下看了
protected void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolean clampedY) {
super.onOverScrolled(scrollX, scrollY, clampedX, clampedY);
if (scrollY == 0) {
isScrolledToTop = clampedY;
isScrolledToBottom = false;
System.out.println("onOverScrolled isScrolledToTop:" + isScrolledToTop);
isScrolledToTop = false;
isScrolledToBottom = clampedY;
System.out.println("onOverScrolled isScrolledToBottom:" + isScrolledToBottom);
notifyScrollChangedListeners();
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
　　 // 这个log可以研究ScrollView的上下padding对结果的影响
System.out.println("onScrollChanged getScrollY():" + getScrollY() + " t: " + t + " paddingTop: " + getPaddingTop());
if (getScrollY() == 0) {
isScrolledToTop = true;
isScrolledToBottom = false;
System.out.println("onScrollChanged isScrolledToTop:" + isScrolledToTop);
} else if (getScrollY() + getHeight() - getPaddingTop() - getPaddingBottom() == getChildAt(0).getHeight()) {
isScrolledToBottom = true;
System.out.println("onScrollChanged isScrolledToBottom:" + isScrolledToBottom);
isScrolledToTop = false;
isScrolledToTop = false;
isScrolledToBottom = false;
notifyScrollChangedListeners();
下面我们看下具体的执行结果：
1. 手动滑动到底部的情况---&两种方式都监听到了
2. 手动滑动到顶部的情况---&两种方式都监听到了
3. 调用smoothScrollTo(0, Integer.MAX_VALUE)或者scrollTo(0, Integer.MAX_VALUE)滑动到底部的情况
---&只有onScrollChanged方法监听到滑动到底部
调用smoothScrollTo(0, 0)或者scrollTo(0, 0)滑动到顶部的情况
---&只有onScrollChanged方法监听到滑动到底部
　　很多细小的知识，我们平时总是因为开发的时候太忙来不及去深究，但是作为开发者我们还是要对技术保持严谨，需要通过自己的实战形成自己的经验，有些很细小的知识可能在关键时候起到意向不到的作用，如果平时注意积累，到时候会事半功倍。
　　文章写得不专业，如果读者觉得有用，记得点赞，也欢迎指正。ListView判断是否滑动到最底部 - 简书
ListView判断是否滑动到最底部
1、判断listView滑动到最后一个Item的内容的底部（即listview不能再向下滑）：
listView.setOnScrollListener(new AbsListView.OnScrollListener() {
public void onScrollStateChanged(AbsListView absListView, int i) {
switch (i) {
case SCROLL_STATE_IDLE:
flag = isListViewReachBottomEdge(absListView);
public void onScroll(AbsListView absListView, int i, int i1, int i2) {}
public boolean isListViewReachBottomEdge(final AbsListView listView) {
boolean result =
if (listView.getLastVisiblePosition() == (listView.getCount() - 1)) {
final View bottomChildView = listView.getChildAt(listView.getLastVisiblePosition() - listView.getFirstVisiblePosition());
result = (listView.getHeight() &= bottomChildView.getBottom());
注：view的getBottom()表示的是该View底部到父控件的左上角的垂直距离。
当ListView的最后一个child View的getBottom()小于等于ListView的getHeight()时，就表示ListView滚动到底部或已经在底部了，不能再向下滑动了。
public abstract void onScrollStateChanged (AbsListView view, int scrollState)
scrollState 分 SCROLL_STATE_TOUCH_SCROLL 和 SCROLL_STATE_IDLE，为正在滑动和停止滑动后。
public void onScrollStateChanged (RecyclerView recyclerView, int newState)
scrollState分SCROLL_STATE_IDLE，SCROLL_STATE_DRAGGING 和 SCROLL_STATE_SETTLING.
2、判断listView滑动到最后一个Item的内容的头部：
listView.setOnScrollListener(new AbsListView.OnScrollListener() {
public void onScrollStateChanged(AbsListView absListView, int i) {
public void onScroll(AbsListView absListView, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
firstVisibleItem表示在现时屏幕第一个ListItem(部分显示的ListItem也算)在整个ListView的位置（下标从0开始）
visibleItemCount表示在现时屏幕可以见到的ListItem(部分显示的ListItem也算)总数
totalItemCount表示ListView的ListItem总数
flag = ((firstVisibleItem + visibleItemCount) == totalItemCount);
3、判断listView滑动到最后一个Item的内容的顶部：
public boolean isListViewReachTopEdge(final ListView listView) {
boolean result =
if (listView.getFirstVisiblePosition() == 0) {
final View topChildView = listView.getChildAt(0);
result = topChildView.getTop() == 0;
注：view的getTop()表示的是该View的顶部到父控件的左上角的垂直距离。
当ListView的第一个child View的getTop()为零时，就表示ListView已经滚动到顶部了或已经在顶部不能在向上滑动了。
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
【转】Android 开源项目分类汇总 旭川君已关注
16:49*字数 29527阅读 1795评论 1喜欢 35 来源：https://github.com/Trinea/android-open-project 更多：Android 开源库获取途径...
来源：https://github.com/Trinea/android-open-project 更多：Android 开源库获取途径整理 目前包括： Android 开源项目第一篇——个性化控件(View)篇 包括ListView、ActionBar、Menu、View...
由于 Android学习笔记之ListView复用机制 这篇文章总结性语句通俗易懂。我又是以学习总结为目的，所以用了很多这篇文章的举例以及总结，如有侵权，请联系我删除，谢谢。 注意：本文中所有源码分析部分均基于 API25 版本，由于安卓系统源码改变很多，可能与之前版本有所...
佛祖一拈花 迦叶笑了 我空拈着手指 花骨朵儿全都低头圆寂 众人愿在名利场中寻花问柳 见到明镜便悔不当初 落光打扰了初醒的黎明 可城市早已人头攒动 夜晚又密谋一起吞并的阴谋 月起后 人们纷纷点亮自己的灯 示意他 不要乱动
Product Description Quad Core 1080P Full HD Indian IPTV Box Support Super Sport HD Channels 1. Live chanenls: All 300+ Indian channels ar...
何为极致健管？ 健管—— 就是健康的生活方式+均衡的营养供给唤醒人体免疫系统的自我修复能力达到对受损、老化、不标准的细胞进行修复、重建的目的，预防和降低各种慢性疾病发生。 健管就是对身体做修复，健管不只有减肥 针对的对象—— 所有慢性疾病和亚健康症状 健管期间需要主要关注的...
Why did you choose this subject, um s I s I say before, and as I said just now, my mate, the, the major I choose the, is that my, uh agen...他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
一个元素原来位于屏幕可视区域底部的上面，当滚动条往上滚动时，这个元素接触到了屏幕底部，我想在该元素接触到屏幕底部时触发一个函数，那么怎么才能捕获到元素接触到屏幕底部这个情况呢？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
&div class="element" style="height: 100width:100 border:1margin-top:500px"&&/div&
元素触底就变红，否则变白色
&script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"&&/script&
var element = $('.element');
var win = $(window);
win.scroll(function() {
if (element.offset().top + element.height() &= win.height() + win.scrollTop()) {
element.css('backgroundColor', '#f33');
element.css('backgroundColor', '#fff');
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
可以通过js得盒子模型获取到当前的scrollTop还有元素的clientTop，再已知盒子高度的情况下进行判断。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
document.addEventListener('scroll', function () {
var div = document.getElementById('div')
if (document.body.scrollTop === div.offsetTop) {
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。