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

最新推荐文章于 2024-08-08 07:50:07 发布

长安古意

最新推荐文章于 2024-08-08 07:50:07 发布

阅读量1.8w

点赞数

分类专栏： jquery 控件学习

本文链接：https://blog.csdn.net/aiyishengyishi/article/details/53508963

版权

本文介绍了如何使用iscroll实现web移动端的局部滚动功能。在点击按钮弹出长内容弹框时，iscroll能确保弹框滚动时不影响body的滚动。iscroll有多个版本，推荐使用最新版以解决旧版本的问题。文章详细讲解了iscroll的基本介绍、初始化方法（iscroll4与iscroll5的区别）、基础配置，并提供了一个实际应用的示例代码。

摘要由CSDN通过智能技术生成

总结一下最近项目用到的一个功能点，具体要求如下：
body中会呈现一个可滚动的长页面，在点击某个按钮的时候，会出现一个弹出框，由于弹出框的内容较长，会出现滚动条，但是要保证位于弹框下部的body在弹框滚动的时候不触发滚动事件。

一开始项目是用touchmove模拟实现，后来决定尝试一下iscroll,碰巧在网上看到这篇文章

在这篇文章中获益匪浅：http://www.cnblogs.com/starof/p/5215845.html

iscroll5中文api地址：http://wiki.jikexueyuan.com/project/iscroll-5/basicfeatures.html

一.iscroll基本介绍

目前版本已经更新到了5，如果可以的话，尽量选择高版本，会将之前版本的一些问题进行修改
这里写图片描述

二.初始化

这里写图片描述

iscroll4和iscroll5初始化有所区别：

iscroll4：
必须用id来获取滚动的元素，前面不加’#’；
myscoll=new iScroll() new的时候 i 小写
iscroll5：
可以支持用class来获取，只需在前面写明“.class名”或“#id名”即可；
myscoll=new IScroll() new的时候 i大写

三.基础配置

myScroll1 = new IScroll('#tc-wrapper1', {
    hScrollbar:false,  //禁止横向滚动
    vScroll:true,      //为true时允许y轴滚动
    bounce:false,      //当滚动器到达容器边界时他将执行一个小反弹动画。在老的或者性能低的设备上禁用反弹对实现平滑的滚动有帮助。
    click:true,    　   //如果你想你的应用程序响应click事件，那么该设置次属性为true
    hideScrollbar: true //是否隐藏滚动条  
});

四.一个栗子

这里写图片描述

完整代码如下

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="misapplication-tap-highlight" content="no"/>
<meta name="HandheldFriendly" content="true"/>
<