前端开发

 首页 > 前端开发 > javascript > javascript原生判断内容区域是否滚动到底部的实例代码

javascript原生判断内容区域是否滚动到底部的实例代码

分享到:
【字体:
导读:
         [导读] 逻辑 判断内容滚动到底需要知道的信息 内容区域的真实高度(也就是滚动区域) 滚动条距离顶部的位置 内容区域的可见高度 分别对应下面的三个API。 element.scrollHeight 获取元素内容高...

逻辑

判断内容滚动到底需要知道的信息

内容区域的真实高度(也就是滚动区域)

滚动条距离顶部的位置

内容区域的可见高度

分别对应下面的三个API。

element.scrollHeight 获取元素内容高度,,,【只读属性】

element.scrollTop 可以获取或者设置元素的偏移值,常用于,计算滚动条的位置,当一个元素的容器没有产生垂直方向的滚动条,那它的 scrollTop 的值默认为0.

element.clientHeight 读取元素的可见高度【只读属性】

下面直接引用MDN上面的一个经典的公式

判定元素是否滚动到底

如果元素滚动到底,下面等式返回true,没有则返回false.

element.scrollHeight - element.scrollTop === element.clientHeight

案例-用户使用协议

只有等用户阅读完协议才可以点击同意,也就是说滚动条到底部之后代表完成阅读




  
  tab
  



  

   同意

好吧,今天突然 看到mdn上面的这个API。脑补了一下
Element.scrollTop

分享到:
javascript判断H5上下滑动方向及滑动到顶...
向上滑动隐藏底部悬浮框,向下滑动显示悬浮框。使用pc端浏览器查看请把浏览器设置为手机浏览器模式。 手机端触屏手指滑动方向 var currntY = 0; var lastY = 0; var touch_screen = {    //方向   direction: { direction: "", object: null, start: function() {      ...
手机注册发送验证码倒计时的简单实例
如下所示: ()这里用的是input做的点击发送验证码
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……