window
.
onscroll
=
function
(
)
{
var
scrollTop
=
document
.
documentElement
.
scrollTop
||
document
.
body
.
scrollTop
;
var
windowHeight
=
document
.
documentElement
.
clientHeight
||
document
.
body
.
clientHeight
;
var
scrollHeight
=
document
.
documentElement
.
scrollHeight
||
document
.
body
.
scrollHeight
;
if
(
scrollTop
+
windowHeight
==
scrollHeight
)
{
console
.
log
(
"距顶部"
+
scrollTop
+
"可视区高度"
+
windowHeight
+
"滚动条总高度"
+
scrollHeight
)
;
alert
(
'已经滚到底部了了!'
)
;
clear
(
)
;
<
/
script
>
javascript 网页自动滚动到底部函数<!-- 页面自动滚动到底部 --><script language="javascript">//页面加载完毕后执行window.onload=function(){//设置定时器 timer=setInterval("scrollwindow()",1000);}//清除定时器function clear(){ clearInterval(timer);}//滚动函数let gao=0;func
代码如下:
[removed] = function(){
var h = document.documentElement.scrollHeight || document.body.scrollHeight;
window.scrollTo(h,h);
以上2种方法均可以实现页面加
现在我们来了解几个dom属性:
scrollTop:获取或设置一个元素的内容垂直
滚动
的像素数,当一个元素的内容没有产生垂直方向的
滚动
条,那么它的 scrollTop 值为0
scrollHeight:这是一个只读属性,是元素内容高度的度量,...
这个实例应该说可以很简单,直接使用jQuery的方法来处理也是可以的。但本文底层使用原生的js来处理,遇到一些小知识点可以分析一下也算有所得。
原理很简单,就是为window添加一个scroll事件,浏览器每次触发scroll事件时判断是否
滚动
到了浏览器
底部
,如果到了
底部
则加载新数据。关键是计算
滚动
条是否
滚动
到了浏览器
底部
,算法如下
滚动
条卷起来的高度 + 窗口高度 > 文档的总高度 + 50/*我这里将
滚动
响应区域高度取50px*/;如果这个判断为true则表示
滚动
条
滚动
到了
底部
。
<style type="text/css">
html,body, div, dl, dt, d
```
javascript
var form = document.getElementById('form'); //获取表单元素
var formHeight = form.scrollHeight; //获取表单的高度
var scrollSpeed = 1; //设置
滚动
速度,可以根据需求修改
function autoScroll() {
if (form.scrollTop < formHeight) { //当前
滚动
位置小于表单高度时
form.scrollTop += scrollSpeed; //向下
滚动
setTimeout(autoScroll, 50); //调用自身,实现
自动
滚动
} else {
form.scrollTop = 0; //
滚动
到
底部
时,回到顶部
setTimeout(autoScroll, 50); //调用自身,实现循环
滚动
autoScroll(); //调用
函数
,开始
自动
滚动
这段代码会获取到表单元素,并获取表单的高度。然后设置一个
滚动
速度,通过循环调用自身的方式实现表单的
自动
滚动
。
希望对您有所帮助!