// JavaScript Document |
/******************** |
* 取窗口滚动条高度 |
******************/ |
function getScrollTop() |
{ |
var scrollTop=0; |
if(document.documentElement&&document.documentElement.scrollTop) |
{ |
scrollTop=document.documentElement.scrollTop; |
} |
elseif(document.body) |
{ |
scrollTop=document.body.scrollTop; |
} |
return scrollTop; |
} |
/******************** |
* 取窗口可视范围的高度 |
*******************/ |
function getClientHeight() |
{ |
var clientHeight=0; |
if(document.body.clientHeight&&document.documentElement.clientHeight) |
{ |
var clientHeight =(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; |
} |
else |
{ |
var clientHeight =(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; |
} |
return clientHeight; |
} |
/******************** |
* 取文档内容实际高度 |
*******************/ |
function getScrollHeight() |
{ |
returnMath.max(document.body.scrollHeight,document.documentElement.scrollHeight); |
} |
function test(){ |
if(getScrollTop()+getClientHeight()==getScrollHeight()){ |
alert("到达底部"); |
}else{ |
alert("没有到达底部"); |
} |
} |
//------------------------判断窗体滚动条到达底部---------------------------- |
function reachBottom(){ |
var scrollTop =0; |
var clientHeight =0; |
var scrollHeight =0; |
if(document.documentElement && document.documentElement.scrollTop){ |
scrollTop = document.documentElement.scrollTop; |
}elseif(document.body){ |
scrollTop = document.body.scrollTop; |
} |
if(document.body.clientHeight && document.documentElement.clientHeight){ |
clientHeight =(document.body.clientHeight < document.documentElement.clientHeight)? document.body.clientHeight : document.documentElement.clientHeight; |
}else{ |
clientHeight =(document.body.clientHeight > document.documentElement.clientHeight)? document.body.clientHeight : document.documentElement.clientHeight; |
} |
scrollHeight =Math.max(document.body.scrollHeight,document.documentElement.scrollHeight); |
if(scrollTop + clientHeight == scrollHeight){ |
returntrue; |
}else{ |
returnfalse; |
} |
} |
//-----------------判断DIV滚动条到达底部----------------------- |
function sc(){ |
var e=document.getElementById('pop_contenter_id'); |
if(e.scrollTop>0){ |
var heigh=e.offsetHeight+e.scrollTop; |
if(heigh>e.scrollHeight-30){ |
alert('到底了 大概的。'); |
} |
} |
} |
var s=setInterval("sc('{$url}')",4000);
|
- 浏览: 39144 次
- 性别:
- 来自: 北京
相关推荐
2. **判断滚动位置**:为了确定用户是否到达页面底部,通常会设置一个阈值,比如距离页面底部一定像素距离时,视为到达底部。这个阈值可以根据实际页面布局和内容长度进行调整。 3. **异步加载**:当触发加载新数据...
以上就是 Vue.js 中实现滚动判断的几个关键知识点,包括判断是否滚动到底部、检测滚动方向、滚动节流以及获取滚动可视区域内的 DOM 元素。这些技巧能够帮助你创建更流畅、更高效的滚动交互体验。
当用户点击按钮时,`scrollTo`函数被调用,其中`0`代表水平滚动位置(在这里我们不需要),`document.body.scrollHeight`则表示文档的总高度,将视窗滚动到这个位置即可到达页面底部。 为了优化用户体验,可以考虑...
// 判断是否滚动到底部或顶部,执行相应操作 } }); ``` 在这个例子中,`myElement`是具有滚动条的元素。当用户滚动这个元素时,`mousewheel`事件会被触发,然后通过`event.stopPropagation()`阻止事件继续向父...
1. **JavaScript代码**:这是实现触底刷新功能的核心部分,包括定义事件监听器、判断用户是否到达页面底部的逻辑以及与服务器通信的函数。 2. **CSS样式**:为了确保刷新动画的平滑性和视觉一致性,插件可能包含...
对于动态加载,iscroll.js通过监听滚动位置,判断是否到达页面底部,触发加载新内容的回调函数。 ### IV. 集成与应用 要使用iscroll.js,首先需要将其下载到项目中,然后在HTML文件中引入js文件。接着,创建一个...
标题中的“无间隙循环滚动鼠标浮动停止滚动”指的是在网页或软件界面中,当用户使用鼠标滚轮进行滚动操作时,页面能够实现无间隔、连续的循环滚动,并且当鼠标浮动到页面顶部或底部时,滚动能自动停止,提供一种平滑...
开发者可以监听这个事件,判断是否到达页面底部,如果到达,则向服务器发送请求获取更多内容。 2. **实现方法**: - **jQuery插件**:如`infinite-scroll`插件,提供了简单的API和配置选项,使得实现滚动加载变得...
2. 使用jQuery监听滚动事件,判断是否到达页面底部。 3. 当到达底部时,通过Ajax发送请求到服务器。 4. 服务器端处理请求,返回新的数据。 5. 客户端接收到数据后,将其插入到页面的适当位置。 整个过程中,性能...
2. **监听滚动事件**:通过监听scrollEnd事件,判断是否达到分页加载条件,如到达页面底部。 3. **动态插入内容**:加载新数据后,应动态插入到页面相应位置,而非替换现有内容。 4. **性能优化**:合理设置分页大小...
7. **滚动事件监听**:iScroll 会自动处理用户的滚动行为,但你可以通过监听`scrollEnd`事件来触发其他操作,比如判断是否到达底部以触发上滑加载。 总的来说,基于iScroll实现下拉刷新和上滑加载效果,涉及到前端...