原生JS实现页面滚动条加载数据，页面下拉加载内容

最新推荐文章于 2024-05-13 08:47:21 发布
最新推荐文章于 2024-05-13 08:47:21 发布
阅读量2k 收藏 3
点赞数 5
分类专栏： JavaScript 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A20201130/article/details/122916202
版权

一、前言

今天这个案例是滚动条事件，当滚动条距离底部的距离小于一个范围值时，会自动的增加页面的高度，从而达到永远划不到底部的效果。

二、scrollHeight、scrollTop和clientHeight的区别

document.documentElement.scrollHeight{\color{Red} } 网页的全文高

document.documentElement.scrollTop 滚动条距离顶部的距离（滚动条被卷去的距离）

document.documentElement.clientHeight 可以看到的屏幕高度

<
最低0.47元/天 解锁文章
土豆切成丝
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
页面向下滚动内容滑动展示出来效果
06-12
效果描述： 基于jQuery库的flowup.js插件 当你的页面向下拖动的时候，底部的列表会向上滑动展示出来，有一个动画效果 使用方法： 1、将head中的css样式引入到你的网页中 2、将代码部分拷贝到你的网页body结束前的地方即可 (js采用绝对路径，不建议修改)
移动端H5实现纵向滑动到顶部，能下拉出来一个页面，并且根据内容自适应高度
cai_bird1111862的博客
10-23 1453
需求： 移动端H5页面实现下拉顶部页面，出现一个开屏广告页面，类似于百度APP下拉出现一个 服务中心 利用定位和touchs事件实现 页面HTML <div class="divModel"> <div class="div"> <div class="container"> <p>啦啦啦啦</p> <p>啦啦啦啦</p>
JS实现滚动加载更多
最新发布
油墨香^-^的博客
05-13 50
我们可以在scroll事件处理函数中检测当前的滚动位置和页面的高度，来判断用户是否已经滚动到了页面底部。在这个例子中，我们使用了jQuery的scrollTop、height和documentHeight函数来获取当前的滚动位置、窗口高度和页面高度。最后，我们需要一个用来检测用户是否滚动到页面底部的函数。我们可以在scroll事件处理函数中调用加载数据的函数，来实现滚动加载更多的功能。在这个例子中，我们使用了jQuery的$.ajax函数来发送一个GET请求，并指定了服务器的URL和数据的格式。
页面滚动动态加载数据,页面下拉自动加载内容
qq_15804925的博客
10-08 5885
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局，那些图片是动态加载出来的，效果很好，对服务器的压力相对来说也小了很多  有手机的相信都见过这样的效果：进入qq空间，向下拉动空间，到底部时，会动态加载剩余的说说或者是日志  今天我们就来看看他们的实现思路和js控制动态加载的代码 下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出，
vue 如何实现下拉上拉展示部分内容
weixin_43818906的博客
11-22 1189
vue 如何实现下拉上拉展示部分内容
玩转 H5 下拉上滑动效果
weixin_30699235的博客
10-31 1158
在APP中我们经常会在页面下拉时看到一些动效，例如下拉图片跟随放大、下拉刷新出现loading动画等，这个交互细节在各个主流APP以及手机原生系统中随处可见，能为APP增添个性亮点。 一、背景 在我们的日常项目中，也会遇到这样的需求，在当前环境下，此类效果大多是靠原生来实现的，但是用原生实现有不少缺陷，原因如下： 原生实现周期长; 跨平台实现成本高; 解决方案通用性差; 运用到现有...
使用jQuery或者原生js实现鼠标滚动加载页面新数据
01-19
下面的代码主要是控制滚动条下拉时的加载事件的，无论是加载图片还是加载记录数据 都可以。 加载jQuery库后我们可以这样使用：  $(window).scroll(function () { var scrollTop = $(this).scrollTop(); var ...
原生javascript实现图片滚动、延时加载功能
12-09
实现效果：下拉滚动条时，图片出现在可见区域时，才开始加载 思路： （1）img标签，把真实的图片地址，放在自己设置的属性里面，如 lazy-src （2）获取img离页面的高度（在JQ里是offset().top），原生是： 　img....
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
10-23
在移动应用开发中，上拉刷新...通过这种方法，开发者可以在不依赖第三方库（如MJRefresh或EGOTableViewPullRefresh）的情况下，实现类似原生App的上拉刷新和下拉加载更多功能，从而提高网页应用的交互性和用户体验。
页面滚动分页---iScroll实例：下拉刷新，滚动翻页
08-10
本文将深入探讨iScroll库以及如何利用它来实现在页面滚动时的动态加载数据。 iScroll是一款轻量级的JavaScript库，由Matteo Spinelli开发，专门用于实现平滑的滚动效果和触摸事件处理。它支持各种设备，包括桌面...
H5页面APP端展示（下拉刷新，上拉加载）
12-16
- `DataLazyLoad.js`：这是一个延迟加载库，可能用于优化页面性能，只在需要时加载图片或数据，防止一次性加载过多内容导致页面卡顿。 结合这些文件，我们可以推测开发者可能使用jQuery来监听滚动事件，`tyloading....
jQuery类似瀑布流效果边下拉页面边加载内容
08-16
jQuery类似瀑布流效果边下拉页面边加载内容
页面下拉显示更多加载内容的代码
10-22
页面下拉显示更多加载内容的代码，包括手指向上拖动，下面显示更多的条目内容
Vue中实现特效下拉加载更多数据
qq_51130780的博客
12-26 4651
根据vue框架实现滚动条下拉，加载更多数据。其实也包含了下面有元素和上面有元素的相关处理方法。
js实现页面下拉后展示导航，以及点击导航自动滑动到相关页面
weixin_33772645的博客
03-31 502
//监控，下拉750px后展示导航 $(window).scroll(function(){ var $this = $(this); var targetTop = $(this).scrollTop(); if(targetTop > 750){ $("#fixed-menu").css('display','block'); ...
原生js实现触底加载下一页
weixin_44622241的博客
09-22 836
简单的布局 <div id="app" class="container"> <div class="block" v-for="(item, index) in blocks" :key="index"> {{item}} </div> </div> js需要先引入vue <script src="https://cdn.jsdelivr.net/npm/vue"></script&
html5中使用外链式为div标签设置属性
大数据-攻城狮
12-07 1339
Document div{ width: 300px; height: 300px; /* 背景色 */ background-color: red; /* 边框 border */ /* 边框的粗细 实线 边框颜色 */ border-top: 10px solid green; bo
原生js实现图片滚动懒加载的demo源码
03-29
以下是一个简单的原生JS实现图片滚动懒加载的demo源码： HTML： ```html ``` CSS： ```css #container { width: 600px; height: 400px; overflow-y: auto; } img { width: 100%; ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值