移动端无限滚动js - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

移动端滚动加载-----jQuery 和原生JS

判断滚动条到底部，需要用到DOM的三个属性值，使用jQuery分别是： $('body').scrollTop()为滚动条在Y轴上的滚动距离。...从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为('body').scrollTop() +(window).height() == 1.绑定滚动监听事件 $(window).bind('scroll...',isScrollBottom); 2.判断滚动条已滚动到底部 $('body').height() - $('body').scrollTop() - $(window).height() <...bind('scroll',isScrollBottom);},2000); } } $(window).bind('scroll',isScrollBottom); 原生JS...：scrollTop、clientHeight、scrollHeight scrollTop为滚动条在Y轴上的滚动距离。

24.1K1 0

基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

通过多次爬坑，发现了这些监听滚动来加载更多的组件的共同点，因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的，所以是进入页面则直接触发一次，当监听到滚动事件之后，继续加载更多，所以对于无限滚动加载不需要写首次载入列表的函数...item.commentCount}} vue.js

3.1K5 0

您找到你想要的搜索结果了吗？

是的

没有找到

移动端滚动研究

移动web滚动问题在移动端如果使用局部滚动，意思就是我们的滚动在一个固定宽高的div内触发，将该div设置成overflow:scroll/auto;来形成div内部的滚动，这时我们监听div的onscroll...方案比较第一种方案由于惯性滚动的时机时由js自己控制所以可以拿到滚动触发阶段的scrolltop值，并且滚动的回调函数onscroll在滚动的阶段都会触发。...在使用模拟滚动时，浏览器在js层面会消耗更多的性能去改变dom元素的位置，在dom复杂层级深的页面更为高，所以在长列表滚动时还要使用正常滚动更好。...使用rAF（requestAnimationFrame）触发滚动事件如果页面只需要兼容高版本浏览器或应用在移动端，又或者页面需要追求高精度的效果，那么可以使用浏览器的原生方法 rAF（requestAnimationFrame...important; } // js 代码 var body = document.body, timer; window.addEventListener('scroll', function

3.9K2 0

js滚动加载（无限加载）（转）

实现无限分页的过程大致如下： 1 视窗滚动到底部 2 触发加载，添加到现有内容的后面。因此，可能会出现两种情况： 1 当页面的内容很少，没有出现滚动条。 2 当页面的内容很多，出现了滚动条。...（即滚动到了底部）

21.3K2 0

js图片横排无限循环滚动

"text/html; charset=utf-8" /> js

12.8K3 0

javascript禁止移动端网页滚动

禁止网页滚动，电脑端其实只要给body加overflow: hidden;css即可，移动端测试发现谷歌可以，国产浏览器阵亡，其实我记得很久之前我遇到过这个问题，最后好像用纯css解决了，但是想不起来了...，于是乎百度搜了个js的方法，故记录下！...document.removeEventListener("touchmove",mo,{passive:false});//恢复可滑动尝试给body的css设置position: fixed;来解决问题，但是这样网页就乱了，所以最终还是用js

2.1K2 0

移动端局部dom实现滚动

移动端局部dom添加滑动事件源码 /** * moveTopLimit: 移动过程中，随着手指的滑动 dom的偏移量 * modifyTopLimit: 触发touchEnd的时候我们需要进行吸顶这样的一个交互...this.moveY = event.touches[0].clientY; this.offset = (this.moveY - this.oldMoveY); // 获取dom当前滚动值

1.1K1 0

js - 移动端的超出滚动功能，附带滚动条，可解决弹层中滚动穿透问题。

背景: 弹层里边有可滚动区域时，在移动端的坑我就不多说了。找了很多解决滚动穿透的方案，最终都不能完美解决。一气之下自己js撸了一个。效果图： ?...原理： 1、解决滚动穿透：通过给弹层绑定touchmove和mousewheel事件，取消默认行为实现。...2、取消默认行为后不能滚动：给需要滚动展示的区域绑定touchstart、touchmove和mousewheel事件，监听触发区域的Y值，对应修改可滚动区域的translateY值，实现滚动效果。...37 transY += moveY; 38 if (moveY > 0 && transY > 0) { 39 /* 鼠标向下移动...touchToBottom(params.scroll, params.bar); 117 } 118 }); 119 } 120 完整demo见github：移动端超出滚动效果

8K1 0

移动端滚动分页解决方案

什么是移动端滚动分页当用户滑动页面到底部时，便会触发页面的加载分页数据功能解决方案解决方案目前主流的解决方案主要有两个，scroll 和 IntersectionObserver scroll...是页面滚动事件，当页面滚动时，判断滚动条距离是否触底，如果是，便执行分页逻辑 IntersectionObserver 是一个用于观察元素可见性变化的API。...它可以用于检测元素是否进入或离开视口（viewport），或者与其他元素发生交叉 scroll 目前m端淘宝采用的是 scroll，它的特点是兼容性够好。...几乎全部的浏览器都支持常用，缺点便是事件触发太频繁，因为每一滚动滚动都需要进行判断。当我们移除掉淘宝 body元素上的scroll事件时，分页逻辑便失效了。...，当页面滚动时，判断滚动条距离是否触底，如果是，便执行分页逻辑优点是兼容性好，缺点是事件触发频繁，性能差 IntersectionObserver 是一个用于观察元素可见性变化的API。

9071 0

背景无限滚动

它的实现也很简单，要么做一个很长的背景图，然后移动相机；要么就是实现一个跑马灯，像那些轮播图什么的，大家应该都有写过。 ?...背景是两张一样的背景图，第一张图在前，第二张图在后，两张图同时移动，当第一张图正好移动到出屏幕的时候，第二张图正好移进屏幕，这个时候复原两张图的初始位置。这个过程不停循环就有走不完的路程了。 ?...overflow 所以我们在onload的时候还是得手动去对齐一下bg2的位置，因为它在布局编辑器里面只是往右移动了我们的设计分辨率一样宽的距离。

2K3 0

移动端框架滚动类 iScroll5

HTML5学堂：移动端开发中，经常遇到需要模拟APP的效果header或是footer固定住，里面的内容区域实现滚动。但是对低端手机单纯使用CSS是兼容不了，需要JavaScript的支持。...本文讲解了使用iScroll5的使用方法，解决了固定高度的容器内滚动内容。...iscroll诞生的意义之所以iscroll会诞生，主要是因为无论是在以前的iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容...如果希望ul中的内容发生滚动，需要在外层添加一层，同时将iScroll的功能添加到最外层上。...scrollToElement(el, time, offsetX, offsetY, easing) 滚动到某个元素 offsetx和offsety定义像素偏移，这样你可以滚动到元素加上一个指定的偏移量

1.5K9 0

web移动端：touchmove实现局部滚动

总结一下最近项目用到的一个功能点，具体要求如下： body中会呈现一个可滚动的长页面，在点击某个按钮的时候，会出现一个弹出框，由于弹出框的内容较长，会出现滚动条，但是要保证位于弹框下部的body在弹框滚动的时候不触发滚动事件... 管理三.js...touchmove事件的要点主要是移动方向的判断和滑动边界的判断移动方向的判断 var replyListTop=parseInt($(".replyList").css("top")...true:false B.向下滑动到下边界由于滚动区域是包裹在replyContainer里面的，所以滚动区域的初始top值为标题区域的高度，只要标题区域的高度 == 滚动区域的top值...replyListTop : 3.2*fontHeight; } js完整代码 function replyCengShow(){ var startX; var startY

1.7K2 0

React 查询：无限滚动

在这篇文章中我们将谈谈 React Query 这个状态管理工具提供的一个令人惊叹的功能，即无限滚动（Infinite Scroll）。...在这些平台上，我们不再使用传统的分页，而是通过无限滚动来加载数据。没有上一页或下一页的按钮，数据会根据需要自动生成。但在底层，无限滚动仍然是分页的一种形式。下面让我们看看代码吧！...正如我之前所说，无限滚动是一种不同类型的分页让我们使用 React Query 的 useInfiniteQuery 钩子。... 现在我们的无限滚动就做好了我正在参与

9250 0

js判断移动端和pc端

//判断是手机端还是pc端 function isPc(){ if(window.navigator.userAgent.match(/(phone|pad|pod...MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) { return true; // 移动端...}else{ return false; // PC端 } }

12.4K6 1

从 antDesign 来窥探移动端“滚动穿透”行为

在移动端，我们完全可以使用一种通用的解决方案来解决上述造成“滚动穿透”意外行为：无论元素是否可以滚动时，每次元素的拖拽事件触发时我们只需要进行判断：寻找当前触发 touchMove 事件 event.target...通用 Hook 方案 useTouch 拖动位置首先，我们先来看一个有关于移动端滚动的简单 Hook： import { useRef } from 'react' const MIN_DISTANCE...通过 useTouch 这个 hook 我们可以在移动端配合 touchstart、onTouchMove 轻松的计算出手指拖动时的方向和距离。...上述的代码仍然是按照我们在文章开头讲述的解决思路来解决移动端滚动链接的意外行为。...为 body 添加 overflow:hidden 其实在移动端并没什么太大的实际作用，我们 touchmove 事件中的处理逻辑对于阻止意外滚动行为的发生已经完全足够了。

1.6K2 0

【总结】1823- 移动端滚动穿透与滚动溢出解决方案

滚动穿透问题描述在移动端 WEB 开发的时候（小程序也雷同），如上录屏所示，如果页面超过一屏高度出现滚动条时，在 fixed 定位的弹窗遮罩层上进行滑动，它下面的内容也会跟着一起滚动，看起来好像事件穿透到下面的...问题原因能够猜想是文档（document）的滚动事件被触发了，如果能禁用滚动事件就好办了。...问题描述如上录屏所示，弹窗内也含有滚动元素，在滚动元素滚到底部或顶部时，再往下或往上滚动，也会触发页面的滚动，这种现象称之为滚动链（scroll chaining）, 但是感觉滚动溢出（overscroll...值描述 auto 默认效果，元素的滚动可以传播到祖先元素。 contain 阻止滚动链，滚动不会传播到祖先元素，但是会显示节点自身的局部效果。...，从而页面滚动也不会触发了，而在滚动之间则不做处理。

1.3K1 1

一款用于 Vue.js 的无限滚动插件

本文由 #公众号：一个正经的程序员原创作者：散淡样子 GitHub：https://github.com/LouisLiu00 00 前言 Web 项目经常会用到下拉滚动加载数据的功能，今天就来种草一款...--infinite-loading这个组件要放在列表的底部，滚动的盒子里面！...state: 该组件会传递一个特殊的事件参数state给事件处理器来改变加载状态， loaded方法用于在每次加载数据后停止播放动画，然后该组件将准备好进行下一次触发； complete方法用于完成完整的无限加载...，则该组件将不再处理任何滚动操作。

1.1K2 0

无限滚动加载最佳实践

优秀无限滚动的五项原则将无限滚动做好，并不是不可能完成的任务。为了完成它，记住并遵守以下方针。 1....仅适用移动设备：因为移动端屏幕要小得多，导航条所占比例可以相对大一些。如果屏幕上是滚动的内容，用户滚动获取新内容的时候，导航条可以隐藏起来；当用户开始往回滚动试图回到顶部的时候再显示出来。 ? 2....如果有页脚，加上“加载更多”按钮无限滚动阻碍用户的访问页脚。...结论无限滚动实现得好的话，可以达到令人难以置信的光滑无缝体验。很好的是，关于好的无限滚动，你已经获得一些线索了，这会帮你建立完美的用户体验。...---- 往期精选文章使用虚拟dom和JavaScript构建完全响应式的UI框架扩展 Vue 组件使用Three.js制作酷炫无比的无穷隧道特效一个治愈JavaScript疲劳的学习计划全栈工程师技能大全

5.5K2 0

js移动端中touch事件

触摸事件是在移动设备(如智能手机或平板电脑)上查看页面时触发的事件。它们允许您跟踪多点触摸事件。...我们有4个触摸事件: touchstart 触摸事件已经启动(触摸表面) touchend 一个触摸事件已经结束(表面不再被触摸) touchmove 触摸移动手指(或任何接触设备的东西)在表面移动 touchcancel...clientX / clientY 无论是否滚动，鼠标指针相对于浏览器窗口的x和y坐标 screenX / screenY 屏幕坐标中鼠标指针的x和y坐标 pageX / pageY 页面坐标(包括滚动

10.4K2 0

js 判断当前是移动端还是PC端

源代码：https://gitee.com/miofly/resources // 移动端兼容 ;var adaptive={};(function(f,g){var h=f.document;var...=750;window['adaptive'].scaleType=1;window['adaptive'].init();; function isPc () { // 判断是移动端还是...PC端 var _$=["Win", "Mac", "X11"]; var is_win=navigator["platform"]["indexOf"](_$[0])==0;...'PC端' : '移动端')

12.6K4 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭