优化iScroll插件滑动体验，一劳永逸解决滑动卡顿难题！

前端

2023-11-02 22:05:36

iScroll滑动卡顿的成因分析

1. 硬件差异

不同的手机硬件性能差异很大，尤其是处理器和内存。如果您的手机处理器性能较弱，或者内存较小，则可能会导致iScroll插件在滚动时出现卡顿现象。

2. 网络环境

如果您的网络环境较差，或者正在访问速度较慢的网站，则可能会导致iScroll插件在滚动时出现卡顿现象。

3. 页面内容过多

如果您的页面内容过多，或者包含大量图片或视频，则可能会导致iScroll插件在滚动时出现卡顿现象。

4. iScroll版本过低

如果您的iScroll版本过低，则可能会导致iScroll插件在滚动时出现卡顿现象。

5. iScroll使用不当

如果您在使用iScroll插件时，没有正确配置相关参数，或者没有正确调用iScroll插件的方法，则可能会导致iScroll插件在滚动时出现卡顿现象。

iScroll滑动卡顿的解决方案

1. 升级手机硬件

如果您的手机硬件性能较弱，或者内存较小，则可以考虑升级手机硬件。这将有助于提高iScroll插件的滚动性能。

2. 优化网络环境

如果您的网络环境较差，或者正在访问速度较慢的网站，则可以尝试切换网络环境，或者使用更快的网络连接。这将有助于提高iScroll插件的滚动性能。

3. 减少页面内容

如果您的页面内容过多，或者包含大量图片或视频，则可以尝试减少页面内容，或者将图片或视频进行压缩。这将有助于提高iScroll插件的滚动性能。

4. 升级iScroll版本

如果您的iScroll版本过低，则可以尝试升级iScroll版本。这将有助于提高iScroll插件的滚动性能。

5. 正确使用iScroll插件

在使用iScroll插件时，您需要正确配置相关参数，并正确调用iScroll插件的方法。这将有助于提高iScroll插件的滚动性能。

具体案例分析

前几天在帮一个同事看了个问题，就是他的老项目里（用的jquery）写的，用iScroll插件做滚动加载的时候，在他的iphone7手机上，指定区域只能移动6px左右，这明显不正常，其他同事包括我的（8plus）是正常的，然后帮他找原因，首先查看了下iScroll的版本4.25….然后检查了他的代码：

$("#wrapper").iScroll({
	vScroll: true,
	hScroll: true
});

问题很明显，在页面没有初始化完成前就把iScroll初始化了，

iScroll.js
;(function($){
	var _iScroll;
	$.fn.iScroll=function(opt){
		if(!this.length){return;}
		if(typeof opt == "function"){opt={onBeforeScrollStart:opt}}
		opt = $.extend({
			cursor : 'auto',
			hScrollbar : true,
			vScrollbar : true,
			hideScrollbar : true,
			fadeScrollbar : true,
			scrollbarClass : '',
			fixedScrollbar : false,
			resizeScrollbars : true,
			mouseWheelSpeed : 20,
			snap : false,
			momentum : true,
			bounce : true,
			invertWheelDirection : false,
			disableMouse : false,
			disablePointer : !$.ui.isTouchSupported,
			disableTouch : $.ui.hasTouch,
			disableHWTransforms : false,
			bounceLock : true,
			x : 0,
			y : 0,
			hScroll : false,
			vScroll : false,
			fixedInParent : false,
			zoom : false,
			zoomMin : 1,
			zoomMax : 4,
			doubleTapZoom : 2,
			startupZoom : 1,
			wheelAction : 'scroll',
			snapThreshold : 1,
			onBeforeScrollStart : function(e){(e.preventDefault !== undefined)? e.preventDefault():e.returnValue=false;},
			onScrollStart : null,
			onBeforeScrollMove : null,
			onScrollMove : null,
			onBeforeScrollEnd : null,
			onScrollEnd : null,
			onTouchEnd : null,
			onZoomStart : null,
			onZoom : null,
			onZoomEnd : null,

报这个错:

undefined is not an object (evaluating '_iScroll.hScroll = opt.hScroll')

实际是脚本没有加载完，容器的高度没有，导致加载滚动插件时iScroll.hScroll 为undefined。

解决办法就是：
在页面加载完成后再初始化iScroll，于是改为这样：

$(function(){
	$("#wrapper").iScroll({
		vScroll: true,
		hScroll: true
	});
})

发现运行正常，于是找同事测试，完美运行！
然后这个同事非常感谢，然后他就把我推荐给另外一个同事说我可以帮他看问题，就去找另一个同事了解问题，问题和上面相似，滚动加载展示不全，而且不会回弹，一开始我以为还是没有放在页面加载完之后初始化iScroll，结果查看代码后发现，是在页面加载完后初始化的，并且滚动条的样式都正常显示。

然后我就觉得奇怪了，可能是iScroll有问题，查看了版本，也是最新版本，本地用浏览器访问页面也没有问题，于是我就把代码复制到一个新的页面，发现滚动一切正常，又检查了一下整个网站发现也没有什么特别的地方，无奈之下直接让同事把代码提交给我了。

回到家打开电脑看代码，发现除了样式不一样，和之前的代码没有什么区别，于是我对比了样式，样式也没什么问题，最后发现iScroll写成了iSroll。。。把iSroll改成iScroll后，直接运行正常，同事那边也测试没问题，终于松了一口气！