js判断滚轮是否到达页面的底部

最新推荐文章于 2021-12-30 10:30:25 发布
最新推荐文章于 2021-12-30 10:30:25 发布
阅读量137 收藏 1
点赞数
文章标签： python javascript ViewUI
原文链接：https://my.oschina.net/kt431128/blog/224735
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

// JavaScript Document
/********************
* 取窗口滚动条高度
******************/
function getScrollTop()
{
    var scrollTop=0;
    if(document.documentElement&&document.documentElement.scrollTop)
    {
        scrollTop=document.documentElement.scrollTop;
    }
    elseif(document.body)
    {
        scrollTop=document.body.scrollTop;
    }
    return scrollTop;
}
 
 
/********************
* 取窗口可视范围的高度
*******************/
function getClientHeight()
{
    var clientHeight=0;
    if(document.body.clientHeight&&document.documentElement.clientHeight)
    {
        var clientHeight =(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;        
    }
    else
    {
        var clientHeight =(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;    
    }
    return clientHeight;
}
 
/********************
* 取文档内容实际高度
*******************/
function getScrollHeight()
{
    returnMath.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
 
function test(){
        if(getScrollTop()+getClientHeight()==getScrollHeight()){
                alert("到达底部");
        }else{
                alert("没有到达底部");
        }
}
 
 
//------------------------判断窗体滚动条到达底部----------------------------
 
function reachBottom(){
        var scrollTop =0;
        var clientHeight =0;
        var scrollHeight =0;
        if(document.documentElement && document.documentElement.scrollTop){
                scrollTop = document.documentElement.scrollTop;
        }elseif(document.body){
        scrollTop = document.body.scrollTop;
        }
        if(document.body.clientHeight && document.documentElement.clientHeight){
                clientHeight =(document.body.clientHeight < document.documentElement.clientHeight)? document.body.clientHeight : document.documentElement.clientHeight;
        }else{
                clientHeight =(document.body.clientHeight > document.documentElement.clientHeight)? document.body.clientHeight : document.documentElement.clientHeight;
        }
        scrollHeight =Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
        if(scrollTop + clientHeight == scrollHeight){
                returntrue;
        }else{
                returnfalse;
        }
}
 
 
 
//-----------------判断DIV滚动条到达底部-----------------------
 function sc(){
           var e=document.getElementById('pop_contenter_id');
            if(e.scrollTop>0){
                        var heigh=e.offsetHeight+e.scrollTop;
                        if(heigh>e.scrollHeight-30){
                            alert('到底了  大概的。');
                    }
                }
}

var s=setInterval("sc('{$url}')",4000);

 

 

 

 

 

 

 

转载于:https://my.oschina.net/kt431128/blog/224735

weixin_34082695
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js判断页面是否滚动到底部
qq_29236119的博客
04-02 5009
原理 判断页面是否滚动到底部的前提： 内容区域的高度（element.scrollHeight ） 滚动条距离顶部的位置（element.scrollTop ） 内容区域的可见高度（element.clientHeight） 判断条件 element.scrollHeight - element.scrollTop === element.clientHeight 返回true则表示滚动到底部 demo handleScroll(){ let scrollTop = document.docume
JS判断是否到达页面底部
羽筠的博客
12-07 8019
JS判断是否到达页面底部 判断标准：窗口高度 + 滚动条位置 >= 页面高度
JS判断是否已经到达页面底部
weixin_34149796的博客
01-15 255
$(window).scroll(function(){ var scrollTop=$(this).scrollTop(); var scrollHeight=$(document).height(); var windowHeight=$(this).height(); if(scrollTop+windowHeight==scrollHeight){ alert("到底了！")...
判断滚动条是否滚动到底部
liushangchao的专栏
08-22 1421
先是对一个DOM元素的三个属性先理解。分别是：clientHeight、offsetHeight、scrollTop。说说个人理解。 clientHeight：这个元素的高度，占用整个空间的高度，所以，如果一个div有滚动条，那个这个高度则是不包括滚动条没显示出来的下面部分的内容。而只是单纯的DIV的高度。 offsetHeight：是指元素内容的高度。依照上面的，那这个高度呢就是DIV内
autoscroll:添加用于滚动到网页底部的按钮
06-25
当用户点击按钮时，`scrollTo`函数被调用，其中`0`代表水平滚动位置（在这里我们不需要），`document.body.scrollHeight`则表示文档的总高度，将视窗滚动到这个位置即可到达页面底部。 为了优化用户体验，可以考虑...
鼠标滚轮到最底端继续加载新数据思路
11-03
2. **判断滚动位置**：为了确定用户是否到达页面底部，通常会设置一个阈值，比如距离页面底部一定像素距离时，视为到达底部。这个阈值可以根据实际页面布局和内容长度进行调整。 3. **异步加载**：当触发加载新数据...
ScrollPage.rar
06-05
开发者可以监听这个事件，判断是否到达页面底部，如果到达，则向服务器发送请求获取更多内容。 2. **实现方法**： - **jQuery插件**：如`infinite-scroll`插件，提供了简单的API和配置选项，使得实现滚动加载变得...
jQuery上下滑动加载刷新插件iscroll.js
04-27
对于动态加载，iscroll.js通过监听滚动位置，判断是否到达页面底部，触发加载新内容的回调函数。 ### IV. 集成与应用 要使用iscroll.js，首先需要将其下载到项目中，然后在HTML文件中引入js文件。接着，创建一个...
阻止滚动条事件冒泡
10-16
// 判断是否滚动到底部或顶部，执行相应操作 } }); ``` 在这个例子中，`myElement`是具有滚动条的元素。当用户滚动这个元素时，`mousewheel`事件会被触发，然后通过`event.stopPropagation()`阻止事件继续向父...
js判断滚动条是否已到页面最底部或顶部实例
11-30
本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法。分享给大家供大家参考。具体分析如下： 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了，否则就自动隐藏了，下面就来给大家介绍这种效果实现原理与方法。 当可视区域小于页面的实际高度时，判定为出现滚动条，即： 代码如下:if (document.documentElement.clientHeight < document.documentElement.offsetHeight) scroll = true; 要使用 document.documentElement ，必须在页面头部加入声明： 代码
移动端，JS判断滑到页面底部上滑进行操作
热门推荐
sflf36995800的博客
06-16 1万+
做项目的时候接到小发版以为很小的东西就没放心上，结果还是忽略了很多，造成一些困扰， 1 【滚动区高度获取] document.documentElement.scrollHeight 可以通过【scrollHeight】这个属性去获取，根据【js高性能的理论】像获取这样的属性时页面会再次重绘排版，也就是引起渲染,所以要尽可能的减少这个属性的读取，当然一开始可以获取它的值并保存在一个变量中
js判断页面是否到达底部
qq_43654065的博客
12-30 2975
判断标准： 窗口的高度 + 滚动条的距离 >= 页面的整体高度 1、js window.addEventLister("scroll",funciton(){ //窗口高度 var windowHeight = document.documentElement.Height || document.body.height; //滚动高度 var scrollTop = document.documentElement.scrollTop || docu.
检测页面滚动到底部
weixin_30756499的博客
09-27 374
原理是： 滚动高度 ＋ 页面高度 ＝ 页面滚动总高度 代码如下： //文档的总高度 function getScrollHeight(){ 　　var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0; 　　if(document.body){ 　　　　bodyScrollHeight = docum...
Appium如何判断滑动到了页面底部（Python）
apollo315
03-01 3702
需求：在做appium自动化的过程中遇到一个问题，就是要通过滑动获取所有能获取的页面信息，直到滑动到页面底部，但是发现不知道怎么判断滑动到底部从而终止滑动的循环（appium无法得知滑动成功还是失败） appium本身没有直接判断是否滑动到页面底部的函数，但是我们可以通过一个比较笨的方法来实现滑动到页面底部的判断，思路也比较简单：判断滑动前后的页面元素是否完全一致，如果完全一致则说明滑动失败（...
js判断html页面是否滚动到了最底部
不知不觉 | 笔记
03-24 4076
var c; $(window).on("scroll", function() { clearTimeout(c), c = setTimeout(function() { var b = $(window).scrollTop(), c = $(document).height(), d = $(window).height(); if(b + d >= c) { var cur
原生JS实现移动端判断滑动到底部还是顶部并实现懒加载功能
webFront的博客
06-20 5134
window.onscroll = function () { var scrollT = document.documentElement.scrollTop || document.body.scrollTop;//滚动条的垂直偏移 var scrollH = document.documentElement.scrollHeight...
python+selenium 页面滑动到底部
k77kkxx的博客
03-02 5137
from selenium import webdriver from selenium.common.exceptions import TimeoutException #引入ActionChains鼠标操作类 from selenium.webdriver.common.action_chains import ActionChains driver= webdriver.Chrome()...
html 滚轮内容一直在底部
最新发布
08-30
要实现让HTML滚轮内容一直保持在底部，可以通过CSS和JavaScript来完成。 首先，使用CSS设置一个固定高度的滚动容器，例如： ``` <style> .scroll-container { height: 300px; overflow-y: scroll; } </style> ``` 然后，在HTML中创建一个滚动容器，并将需要滚动的内容放在其中： ``` <div class="scroll-container"> <!-- 滚动内容 --> </div> ``` 接下来，使用JavaScript来控制滚动容器滚动到底部。首先，获取滚动容器的DOM对象： ``` <script> var scrollContainer = document.querySelector('.scroll-container'); </script> ``` 然后，在加载完滚动内容之后，将滚动容器的滚动位置设置为底部： ``` <script> window.addEventListener('load', function() { scrollContainer.scrollTop = scrollContainer.scrollHeight; }); </script> ``` 以上代码中，`scrollContainer.scrollTop`表示滚动容器的滚动位置，`scrollContainer.scrollHeight`表示滚动容器的内容高度。将`scrollTop`设置为`scrollHeight`时，滚动容器会滚动到内容的底部。 通过以上的CSS样式和JavaScript代码，可以让HTML滚轮内容始终保持在底部。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值