原生js触碰到底部触发函数;

/**
function __morebook(){
console.log(123)
}
ScrollBottom(function(){__morebook();});
**/ //如果直接写一个如下:
// ScrollBottom 方法里有个参数x,x作为函数带参数。然后通过doFun去调用;
// 为何doFun做为参数也调用了,是因为方法里有个setTimeOut;
// 这样写的意义是什么呢?是将scrollBottom写成公用方法,可以通过任何方式点击或者滚动都可以调用;
ScrollBottom(function(){console.log('碰到底部:',123)})
//点击: $("jsMoreTip").click(function () { __morebook() }); //滚动条到底部触发的事件
function ScrollBottom(x){
function __getScrollTop(){
var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
if(document.body){bodyScrollTop = document.body.scrollTop;}
if(document.documentElement){documentScrollTop = document.documentElement.scrollTop;}
scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
return scrollTop;
}
function __getWindowHeight(){
var windowHeight = 0;
if(document.compatMode == "CSS1Compat"){
windowHeight = document.documentElement.clientHeight;
}else{
windowHeight = document.body.clientHeight;
}
return windowHeight;
}
function __getScrollHeight(){
var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
if(document.body){bodyScrollHeight = document.body.scrollHeight;}
if(document.documentElement){documentScrollHeight = document.documentElement.scrollHeight;}
scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
return scrollHeight;
}
window.onscroll = function(){
if(__getScrollTop() + __getWindowHeight() == __getScrollHeight())
doFun(x)
};
}
function doFun(x){setTimeout(x,0)}
原生js触碰到底部触发函数;的更多相关文章
- 原生JS实现call,apply,bind函数
1. 前言 使用原生JS实现call和apply函数,充分了解其内部原理.call和apply都是为了解决改变this的指向.作用都相同,只是传参的方式不同.除了第一个参数外,call可以接受一个参数 ...
- 原生JS封装创建多级菜单函数
手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求. 子类层级不确定,可根据数据自动生成多级菜单. 操作便捷,只需传入一个HTML标签. 缺点: 需要满足特定的数据结构 废话不多说,展示代码. ...
- 原生JS写Ajax的请求函数
一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...
- 用纯原生js实现jquery的ready函数(两种实现)
第一种实现方式: var dom = new function() { var dom = []; dom.isReady = false; dom.isFunction = function(obj ...
- 原生js自动触发事件
熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢? js中添加一个主动触发事件的方法有dispatch.该方法能模拟用户行为, ...
- 瀑布流的三种实现方式(原生js+jquery+css3)
前言 项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现的... 原生javascript版 ...
- 原生js实现 常见的jquery的功能
原生选择器 充分利用 bind(this)绑定 <div id="box"> <ul> <li >111 </li> <l ...
- 原生JS和JQuery的区别
1.原生js和jQuery的入口函数加载模式不同 原生js等页面dom加载完成并且图片等资源也加载完成之后才会执行: jQuery则是等页面dom加载完成执行,不会等图片等资源也加载完成: (也就是说 ...
- onload事件与ready事件的区别,原生js与jquery的区别
onload事件与ready事件分别是原生js与jquery的入口函数 原生js入口函数写法: window.onload=function(){ } jquery入口函数写法: $(document ...
随机推荐
- java的数组
作用:存储相同类型的一组数组,相当于一个容器,存放数据的.对同种数据类型集中存储.管理.便于遍历 数组类型:就是数组中存储的数据的类型 特点:数组中的所有元素必须属于相同的数据类型,数组中所有元素在内 ...
- (三) 查看USB设备
目录 查看USB设备 lsusb ll /sys/bus/usb/devices cat /sys/kernel/debug/usb/devices dmesg title: 查看USB设备 date ...
- HDU 2051(进制转换)
题意是将十进制数转换成二进制数. 从网上找到的十进制转 k 进制的做法,代码如下: #include <bits/stdc++.h> using namespace std; ','A', ...
- Python——使用高德API获取POI(以深圳南山医疗保健服务POI为例)
以下内容为原创,转载请注明出处. import xlwt #创建Excel,见代码行8,9,11,25,28:CMD下:运行pip install xlwt进行安装 import urllib.req ...
- HDU-1709 The Balance(生成函数)
题意 给$n$个数,有哪些属于$1$到$n$个数字总和$sum$的数是通过该集合任意子集之间的加减运算无法得到的. 思路 对每个数构造$x^{-a[i]}+1+x^{a[i]}$,为了避免负幂次可以将 ...
- 常见JS写法
1.在DIV中找某个CLASS $('.doc_input', 'div')
- GitHub:本地项目上传与团队协作
第一部分:我的本次作业成果 我自己个人的github地址是:colintz的个人仓库 我们开发团队小组的github地址是:小组3集中营 第二部分:强烈推荐的github资源 对于和我一样,初次接触g ...
- CSS3 Flex布局
Flex 用于使页面上的内容自适应屏幕 首先,在网页代码的头部,加入一行viewport元标签. <meta name=”viewport” content=”width=device-widt ...
- Java读取一个文本文件拼接成一个字符串(readFileToString)
import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import java.io.I ...
- HTML和XHTML区别
HTML和XHTML 可扩展超文本标记语言XHTML(eXtensible HyperText Markup Language)是将超文本标记语言HTML(HyperText Markup Langu ...