JS 判断盒子滚动到底部

最新推荐文章于 2024-04-19 15:57:47 发布
最新推荐文章于 2024-04-19 15:57:47 发布
阅读量1.1k 收藏 4
点赞数
分类专栏： 高级js学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lin_fightin/article/details/111991139
版权

了解三个概念

a.scrollTop ----> a盒子被卷上面的距离

a.scrollHeight ----> a盒子的真正高度，包括被隐藏的

a.offsetHeight —> a盒子的可视高度，在这里插入图片描述

那么，当被卷去的高度等于真正的高度-可视的高度时，也就是上图你看不到的隐藏的高度等于盒子被卷去的高度时，就到达了底部。
故 if（a.scrollTop === a.scrollHeight - a.offsetHeight ){ console.log(‘到底部了’) }

coderlin_
关注
专栏目录
js获取个屏幕鼠标盒子的距离(e.clientX,e.offsetX,e.pageX,e.screenX)
x_xiNan9416的博客
09-23 638
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box{ width: 200px; height: 200px; border: 1px solid red.
移动端html5判断是否滚动到底部并且下拉加载
12-14
如何判断滚动是否滚动到了底部? 首先要了解的知识 scrollHeight,clientHeight,scrollTop scrollHeight 只读属性,高度包括所有内容，包含内边距，但不把水平滚动条、边框和外边距算在内。 clientHeight 也是只读...
js 让某个盒子滑动到底部
qq_42039912的博客
04-19 289
1.计算向上卷曲的高度，再设置向上卷曲的高度。2.使用scrollToView方法。
js监听盒子滚动事件判断滚动条是否触底
H5_wenshao的博客
03-04 923
const content_div = $(".checkbox-container .content")[0]; const form_radio = $(".sel-option")[0]; console.log(form_radio, “radio”); console.log(form_radio.value, “checked”); const addEvent = (function () { if (window.addEventListener) { return function (el
js 滚动条判断是否滚动到底部
tyjlearning的博客
07-01 1275
returnthis.$refs.panel.scrollTop ==this.$refs.panel.scrollHeight -this.$refs.panel.offsetHeight; 容器要设置高度，固定高度，否则滚动的是body，this.$refs.panel.scrollTop永远都是0
js判断盒子里面的滚动条是否滚动到盒子的右边界
ys_dd的博客
02-08 2069
let box1 = document.getElementById("box1") let myWidth = box1.scrollWidth - box1.clientWidth box1.addEventListener('scroll', () => { //监听滚动 let needWidth = myWidth - box1.scrollLeft needWidth = Math.abs(needWidth) //允许误差在5px以内 if (box1.sc.
js动态移动滚动条至底部示例代码
10-26
在了解如何使用JavaScript动态地将滚动条移动到网页的底部之前，我们首先要理解网页中滚动条的工作原理。当网页的内容超出了可视区域时，浏览器会提供滚动条以供用户滑动查看隐藏的内容。JavaScript提供了控制滚动条...
jquery DIV撑大让滚动条滚到最底部代码
01-21
在探讨如何使用jQuery让DIV元素的滚动条滚动到最底部之前，我们需要了解几个基础知识点，以便更好地掌握这一操作的原理和应用背景。 首先，需要了解jQuery是什么。jQuery是一个快速、小巧、功能丰富的JavaScript库...
jq判断盒子距离页面底部的距离
最新发布
09-21
`offset().top`获取元素顶部到视口顶部的距离，`element.outerHeight()`获取元素包括边框和内边距的高度，`$(window).scrollTop()`获取滚动条的距离，最后减去`$(window).height()`是因为我们想要的是从页面底部开始...
JavaScript 监听页面滚动到底部 监听盒子内滚动到底部
悟空—
11-01 1255
1.JS监听页面滚动到底部 window.onscroll = function() { if ((document.documentElement.scrollTop + document.documentElement.clientHeight) == document.documentElement.scrollHeight) { alert('到底了') } } 2.监听盒子内滚动到底部 boxScroll('news-container2', 'fun',
判断滚动条是否到底
li2406608527的博客
10-25 176
window.οnscrοll= function(){ var a = document.documentElement.scrollTop==0? document.body.clientHeight : document.documentElement.clientHeight; var b = document.documentElement.scrollTop==0? document.body.scrollTop : document.documentElement.scrollTop; .
JS如何判断滚动条是否滚到底部
魔侠的沙滩
02-21 1245
原文地址：链接：https://www.jianshu.com/p/0a3aebd63a14 判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。 scrollTop为滚动条在Y轴上的滚动距离。 clientHeight为内容可视区域的高度。 scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。 从...
vue项目实现盒子滚动到底部加载更多的功能
Var的博客
07-23 1664
vue项目实现div盒子滚动到底部加载更多的功能 使用vue 的 scroll 事件 可以很快的实现 ----html <div class="scroll_box" ref="evabox" @scroll="Scroll"> <div v-for="(item,index) in imgList" :key="index"> {{item}} </div> </div> ----me
js判断内容区域是否滚动到底部
Terenceno的博客
05-08 2704
1、element.scrollHeight + element.scrollTop +element.clientHeight element.scrollHeight:内容区域的高度 element.scrollTop：滚动条的高度 element.clientHeight ：内容区的可见高度 if（element.scrollHeight - element.scrollTop === el...
js 滚动条可滚动到顶部或底部
m0_65730686的博客
07-11 466
js 滚动条可滚动到顶部或底部
盒子不同模式下的宽高判断
weixin_30257433的博客
09-30 237
曾经遇到过这样的问题，设定一个div，当给div设置padding的时候，发现整个div的宽高都发生了变化，这里就产生了一个疑惑，一个盒子的总体宽高到底是怎么去判断的呢？ 经过查询得知，盒子宽高的判定模式一共有两种，分别为标准模式和怪异模式。 为了能更好的理解我们先设定一个div并给它设定样式： 1 #content1{ 2 width: 200px; 3 ...
【前端 | CSS】滚动到底部加载，滚动监听、懒加载
趟过java，遇见web
08-11 1699
在日常开发过程中，我们会遇到图片懒加载的功能，基本原理是，滚动条滚动到底部后再次获取数据进行渲染。那怎么判断滚动条是否滚动到底部呢？滚动条滚动到底部触发时间的时机和方法又该怎样定义？
JS 判断滚动条到底部的JS代码
丛学达的专栏
04-20 662
判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。 scrollTop为滚动条在Y轴上的滚动距离。 clientHeight为内容可视区域的高度。 scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。 从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop + cl
js 滚动条自动滚动到最底部
热门推荐
qq_45475788的博客
12-15 1万+
<div id="box"> <div>内容1</div> <div>内容1</div> <div>内容1</div> </div> 要让box这个div随着里面内容的增加，滚动条一直处于最底部 css: 给div设置固定高度，并且竖向超出滚动 #box{height:200px;overflow-y:auto} js: var div ...
判断页面是否滚动到底部
06-02
判断页面是否滚动到底部可以通过以下代码实现： ```javascript // 获取文档总高度 const documentHeight = document.documentElement.scrollHeight; // 获取窗口可视区域高度 const windowHeight = window.innerHeight; // 获取文档已经滚动的高度 const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if (scrollTop + windowHeight >= documentHeight) { // 页面已经滚动到底部 } ``` 以上代码中，`document.documentElement.scrollHeight` 表示文档总高度，`window.innerHeight` 表示窗口可视区域高度，`document.documentElement.scrollTop` 和 `document.body.scrollTop` 分别表示文档已经滚动的高度，由于不同浏览器的实现方式不同，需要同时判断两个属性。 当文档已经滚动的高度加上窗口可视区域高度大于等于文档总高度时，即表示页面已经滚动到底部了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

coderlin_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值