滚动到页面底部触发分页事件

  最近写页面写不少东西,,好久没这么频繁写js了。废话不说了...

  用户滑动页面,捕捉用户翻到页面底部时,触发事件。

$(window).scroll(function () {
     var scrollTop = $(this).scrollTop(); // 页面卷上去的高度
     var windowHeight = document.body.clientHeight;  // 当前屏幕上页面的高度
     var docHeight = $(document).height(); // 文档的高度
     // 表示,如果滑到距离底部将近50px的时候,开始触发事件
     if (docHeight - (scrollTop + windowHeight) < 50 ) {
          // do something
     }
});
时间: 2024-11-08 21:06:36

滚动到页面底部触发分页事件的相关文章

当滚动条滚动到页面底部自动加载增加内容的js代码

这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; 2,相关获取页面高度.滚动条位置.文档高度的函数: 复制代码 代码如下://获取滚动条当前的位置 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentEle

滑轮滚动到页面底部ajax加载数据

滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合jsonp是如何实现的吧 当然本例子采用的是jquery库,后期会做成原生js.本例的数据调用的是锋利的jquery一书提供的一段json. 首先要先判断页面怎么样才是滚动到底部,也就是scrollTop+window的height是否大于document的height,jquery如下代码: $(window).scrollTop()+$(window).height()>=$(document).height(): 再给windo

vue 实现滚动到页面底部开始加载更多

直接上代码: <template> <div class="newsList"> <div v-for="(items, index) in newsList"> <div class="date">{{showDay(index)}}</div> <div class="list" > <ul> <li class="list

Jquery滚动到页面底部自动Ajax加载图文列表,类似图片懒加载效果,带加载效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>滚动到页面顶部加载</title&g

selenium,Python3滚动到页面底部的几种解决方案

目录 location_once_scrolled_into_view ActionChains js方法scrollIntoView js方法scrollBy send_keys(Keys.END)模拟向页面发送空格键 页面为ajax动态加载 在用selenium获取页面时,很多时候需要将滚动条拖到页面底部,下面总结了几种方法. location_once_scrolled_into_view #coding=utf-8 from selenium import webdriver from

移动端touchstar、touchmove、touchend 事件如果页面有滚动时不让触发 touchend 事件。

/*仅适用于内容中点击元素.对于拖动等元素,需要自行在页面处理. * 主要是绑定touchstart和touchmove事件,并判断用户按下之后手指移动了多少像素. * 如果手指移动距离小于10像素,则还是认为用户在做点击操作.如果移动距离超过了10像素,则取消后续事件监听函数的执行.*/ <script type="text/javascript"> function makeTouchableButton(ele) { if (!ele) { console.error

Jquery鼠标滚动到页面底部自动加载更多内容,使用分页

https://www.cnblogs.com/qhorse/p/4717726.html index.php代码 [html] view plaincopy<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://

jquery实现滚动到页面底部时无限加载内容的代码

由于时间关系没有整理封装,有空的时候再把他做成一个插件.但复制下来修改一下是可以用的.以下为实例: var p="{$other.p}"; if(p=="") p=1; var stop=true;//触发开关,防止多次调用事件 $(window).scroll(function() { //当内容滚动到底部时加载新的内容 100当距离最底部100个像素时开始加载. if ($(this).scrollTop() + $(window).height() + 100

进入网页开始计时,关闭页面时触发操作事件

<html> <head> <title>页面停留时间</title> </head> <body onload="init(); window.setTimeout('show_secs()',1);" > <script language="javascript"> var ap_name = navigator.appName; var ap_vinfo = navigator