关于iscroll插件在移动端的应用滑动出现卡顿、不流畅问题

最新推荐文章于 2022-03-17 14:05:28 发布

原创最新推荐文章于 2022-03-17 14:05:28 发布 · 1w 阅读

1 ·

CC 4.0 BY-SA版权

插件开发专栏收录该内容

7 篇文章

订阅专栏

本文分享了在移动端实现平滑滚动的三个关键步骤：添加防触控移动事件、禁用滚动条、减少不必要的滚动监听。通过这些方法，可以有效解决移动端页面滚动不流畅的问题。

1，加上：document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

2，把滚动条设置为隐藏：vScrollbar: false

3，尽量去掉不必要的滚动监听事件

以上完美解决了移动端滚动不流畅的问题

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

兰給

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

jQuery移动端下拉刷新、上拉加载更多插件

08-16

- **iScroll**：一个强大的滚动插件，支持下拉刷新和上拉加载，同时兼容PC和移动端。 - **Swipe.js**：专为触摸设备设计的滑动插件，也支持下拉刷新和上拉加载。 - **jQuery PullToRefresh**：轻量级的jQuery插件，...

iscroll使用之页面卡顿问题

weixin_30566111的博客

02-22

377

最近在开发项目时，遇到一个问题，使用iscroll实现的页面滚动，测试时发现在chrome浏览器中的模拟移动设备页面不能平滑滚动，有卡顿现象，在android手机端也有同样的问题。在github上搜索了iscroll的相关问题，以下是对一些觉得对此问题解决有帮助的一些回答的总结。解决办法:通过在head标签中加<script>window.P...

1 条评论您还未登录，请先登录后发表或查看评论

解决iScroll 插件在移动端手机页面不能滚动的问题

startMinsk的博客

08-26

1159

解决iScroll 插件在移动端手机页面不能滚动的问题最近在做一个移动端H5的画面，用到了iscroll插件，但是在移动端调试时，并不能滚动，经过一些尝试。我们需要在元素中加入touch-action:none;这个css就ok了。好了，问题解决。 ...

vue手机端页面设置overflow:scroll后滚动不流畅问题

Fansr_的博客

03-17

1615

解决方法：在overflow:scroll地方也就是需要滚动的部分加上css， .content{ -webkit-overflow-scrolling:touch; } 或者在全局样式处加上代码，避免每个地方都需要重复书写， *{ -webkit-overflow-scrolling:touch; } ...

iscroll滑动卡顿问题

qq_33468121的博客

05-30

1107

在新建IScroll对象之前，加入一行代码原生DOM： document.querySelector('.nav-tabs-parent').addEventListener('touchmove',function(e){ e.preventDefault(); }); jQuery： $(".nav-tabs-parent").on('touchmove',...

iscroll在安卓手机上滑动不流畅的解决方案

weixin_34024034的博客

03-30

463

我用iscroll做了一个上拉加载下拉刷新，本来很开心，效果很不错，但是在安卓手机上就懵了，卡得不要不要的。解决方案 1.第一步，加上一个css属性 -webkit-transform:translate3d(0,0,0); 这个属性可以使浏览器启动硬件加速 2.监听touchmove,用preventDefault来避免多次执行 wrapper.addEventLi...

iScroll插件实现移动端上下拉刷新与流畅滚动

通过 iScroll 插件，开发者可以在不依赖原生容器（如 Cordova 或 React Native）的情况下，在纯 Web 页面中模拟出流畅的滑动刷新行为。进一步分析描述中的技术要点：“iScroll使用基于设备和浏览器性能的各种技术...

基于iScroll的jQuery上下滑动加载刷新插件

jQuery上下滑动加载刷新插件iscroll.js是一种基于iScroll库开发的、用于实现移动端或触屏设备上流畅滚动、下拉刷新与上滑加载更多内容的JavaScript解决方案。该插件结合了jQuery框架的易用性与iScroll核心功能的强大...

iScroll移动端上拉刷新下拉加载案例演示

iScroll 是一个功能强大且广泛应用于移动端开发的 JavaScript 滚动插件，专为解决移动设备上原生滚动体验不佳的问题而设计。在现代 Web 开发中，尤其是在构建单页应用（SPA）或混合式移动应用时，开发者常常需要实现...

探索移动端滑动翻页的多种效果

在移动设备上实现流畅的滑动翻页效果是移动应用开发和网页设计中常见的功能需求。滑动翻页能够提供用户友好的浏览体验，特别是在查看图片、文章或卡片等元素时。以下是对“滑动翻页移动端”这一主题所涉及的知识点的...

关于文字图片滚动插件滚动失效的问题

monkeyfly学前端

09-04

970

Write By Monkeyfly 以下内容均为原创，如需转载请注明出处。前提项目中有个地方需要实现文字无缝滚动的效果。如下图所示：于是负责该项目的后台开发人员，就在 jQuery插件库里面随便找了一个滚动插件来使用：图片文字滚动插件jQuery Scrollbox（点击查看）他之前使用该插件的时候，文字是可以正常滚动的，只是后来因为样式问题需要我前端来调整。然后，我就...

解决IScroll 滚动卡顿问题

技术熊的博客小窝

11-15

1324

我的页面中使用了iscroll进行滚动，但是出现了滚动卡顿的问题。一拖很明显的卡顿。百度搜搜出来解决方案 https://www.cnblogs.com/chenjacky/p/11217088.html 在初始化iscroll的时候，加入以下几个参数。 var is = new IScroll('#wrapper2', { scrollX: false, scrollY: true, cl...

关于移动端用iscroll动画出现闪烁和迟钝(不流畅)的现象记录

宅小屋, 观天下, 心淡定, 享生活。

08-15

3396

页面上所写的JS动画变的非常的卡，整个动画变的非常不流畅。百思不得其解。后查阅资料，发现iscroll官网有提到(参考地址)，这里指出了页面的闪烁，我们需要加上一个CSS属性

iscroll在安卓高版本（6.0以上）某些机型上滑动卡顿问题的解决方法

weixin_33815613的博客

12-30

504

问题：发现公司项目移动端的分类页面在某些安卓机型上滑动时异常卡顿，而且出现卡顿的手机都是非常新的安卓手机，调试的时候发现在谷歌浏览器的手机模拟滚动时也非常卡顿在一段纠结异常的调试和搜索下找到了解决方法：使用用fixed版本的iscroll就可以了：https://github.com/claydotio/iscroll/commit/be4973786cc0ae4402d1b4b74...

iscroll4中滑动速度的修改

perry

11-10

1718

在移动开发中遇到一个问题，就是iscroll4上拉加载下拉刷新的时候，请求回来的数据列表滑动起来感觉很慢，不是特别流畅。我百度了答案，发现很少有讲iscroll4这方面的知识的，所以我就自己查看了下源代码，发现。。。方法：ctrl+f检索speed，找到如下图的代码，把 newDist = (speed * speed) / (2 * deceleration), 这句代码中的2改小，越小

移动端那些事儿之iscroll5

yjwu5353的博客

03-23

1679

关于js移动端的微信页面与iscroll bug

iscroll在手机上滑动不流畅，很卡，如何解决？

Cool的博客

03-17

8919

给scroll元素增加css样式：-webkit-transform:translate3d(0,0,0);

IScroll 无法上下滚动问题

NightHary的专栏

10-17

9543

最近需要做一个移动端查看图片的需求，要求图片可以缩放，但是移屏又无法显示完整张图片，所以就需要上下滑动。但是遇到了一个奇怪点问题，即界面居然无法滑动，图片无法显示完全。后面仔细测试才发现问题的所在。其实原因很简单，在图片没有加载出来的时候我就初始化了iscroll，这样就会导致iscroll无法滚动，所以我们需要这样做 var img = document.getElementById("p

iscroll 的上拉刷新下拉加载及卡顿的解决办法

h5liangliang的博客

09-22

2822

function load() { pullDown = $("#pullDown"), loadingStep = 0; //加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新 pullDown.hide(); myScroll = new IScroll("#wrapper", { disableMouse: false, d