js里clientHeight,scrolltop这些指的是从哪里到哪里的距离啊?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js里clientHeight,scrolltop这些指的是从哪里到哪里的距离啊?相关的知识,希望对你有一定的参考价值。

分不清啊 谁能解释一下

clientHeight:客户可见的浏览器显示页面的高度。
scrollTop:滚动条的滑块距离浏览器页面最顶部的距离,即滚动条滑动了多少距离。
参考技术A clientHeight 为浏览器可见宽度

scrollTop 为垂直滚动条已经滚动的高度,可以理解为网页头部不可见部分的高度(一开始为0,下拉滚动条时,scrollTop变大)

相关一些资料:http://www.cnblogs.com/top5/archive/2010/08/23/1806389.html

js window.scroll 怎么判断滚动到底部

若要想判断js window.scroll是否滚动到底部,需要用的三个属性值,它们分别是:

scrollTop、clientHeight和scrollHeight;

1、scrollTop为滚动条在Y轴上的滚动距离。

2、clientHeight为内容可视区域的高度。

3、scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。

so,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。

参考技术A js判断window.scroll 判断滚动到底部的方法是设置一个变量,来检测鼠标位置。
具体的实现方法如下:
$(window).scroll(function()
如果滚动的高度加上窗口的高度等于页面的高度就是到了底部
if($(window).scrollTop() + $(window).height() == $(document).height())
alert("bottom!"); //已经滚动到底部

);

或者也可以写专用方法检测高度:
function getDocHeight()
var D = document;
return Math.max(
D.body.scrollHeight, D.documentElement.scrollHeight,
D.body.offsetHeight, D.documentElement.offsetHeight,
D.body.clientHeight, D.documentElement.clientHeight
);


然后再用以下方法检测:
$(window).scroll(function()
if($(window).scrollTop() + $(window).height() == getDocHeight())
alert("bottom!");

);
参考技术B 判断scrollHeight(这个是滚动条的长度) 加上 scrollTop(这个是滚动条举例顶部的高度)是否等于document.clientHeight(这个是文档的高度)即可。本回答被提问者采纳

以上是关于js里clientHeight,scrolltop这些指的是从哪里到哪里的距离啊?的主要内容,如果未能解决你的问题,请参考以下文章

js的各种位置,比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别?

判断滚动条到底部的JS代码

clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop

页面实现滑动JS代码

vue.js中滚动条加载更多数据

JS如何判断滚动条是否滚到底部