iScroll 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
iScroll 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议 MIT
开发语言 JavaScript HTML/CSS
操作系统 跨平台
软件类型 开源软件
开发厂商
地区 不详
提 交 者 小编辑
适用人群 未知
收录时间 2011-12-29

软件简介

iScroll 的诞生是因为手机 Webkit 浏览器(iPhone、iPod、Android 和 Pre)本身没有为固定宽度和高度的元素提供滚动内容的方法。这导致了很多网页使用 position:absolute 无法固定页头页尾,并对内容进行滚动的方式。

而 iScroll 就是为了解决这个问题。

即使在本机滚动就足够好的平台上,iScroll也会添加其他方式无法实现的功能。

  • 即使在动量期间,也可以对滚动位置进行粒度控制。您始终可以获取并设置滚动条的x,y坐标。
  • 可以使用用户定义的缓动功能(弹跳,弹性,后退...)自定义动画。
  • 您可以轻松地挂钩到大量自定义事件(onBeforeScrollStart,onScrollStart,onScroll,onScrollEnd,flick等)。
  • 开箱即用的多平台支持。从较旧的Android设备到最新的iPhone,从Chrome到Internet Explorer。
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (1)

加载中
打分: 还行
左右滑动不了,手机端的X浏览器,这个怎么处理?
2017/03/06 12:17
回复
举报
更多评论
发表了资讯
2013/06/03 00:00

iScroll 5 beta 1 发布,跨浏览器的滚动插件

iScroll 5 beta 1 发布了,这是一个全新的版本,在 API 上并不兼容 v4 版本,但愿你的升级过程不会太痛苦。 官方发行说明:http://cubiq.org/iscroll-5-ready-for-beta-test iScroll 的诞生是因为手机 Webkit 浏览器(iPhone、iPod、Android 和 Pre)本身没有为固定宽度和高度的元素提供滚动内容的方法。这导致了很多网页...

5
26
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表于大前端专区
2014/12/22 10:00

IScroll

这里总结一下IScroll使用应该注意的几点细节: 1、如果内容的高度比使用iscroll的标签的小的iscroll是不能滚动,也就是不能有上拉下拉的效果。 2、绑定了iscroll后如果有数据变动(添加或删除了标签)需要使用refresh()方法进行刷新,要不然要失效。 3、使用iscroll事件的时候(scrollstart,scroll,srollend)一定要设...

1
1
发表了博客
2018/06/29 10:26

iscroll的基本方法

// 创建滚动视图 var myScroll = new IScroll('.content', { // bounceEasing: 'elastic', bounceTime: 1200 //常用配置项 //弹簧效果 bounce: true, //打开点击事件 //为了系统更优默认click事件为false,统一为滚动事件 //如果想页面的点击事件和a标签链接生效的话必须让click和tap都设置为true; click: true, tap: tru...

0
0
发表于大前端专区
2014/12/12 07:52

iscroll下拉刷新

iscroll下拉刷新

2
0
发表了博客
2018/01/15 19:29

前端插件--isCroll的使用

中文文档地址: http://wiki.jikexueyuan.com/project/iscroll-5/ 效果图: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1...

0
0
发表了博客
2013/08/12 15:51

web-app的iscroll

1,手机web-app的scroll http://www.gafish.net/api/iScroll.html#overview iScroll的历史 之所以iscroll会诞生,主要是因为无论是在iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容。 这个不幸的规则导致所有web-app要模拟成app的样子时,只能由一个绝对...

0
0
发表了博客
2018/08/15 17:55

IScroll基本用法

一、为了防止手机上卡顿: 1、从新设置一下焦点。 2、 <script>try { window.PointerEvent = undefined; } catch (e) { } </script> 二、以下是一个典型的下拉加载数据用法 function loadsroll() { if (myScroll == null) { myScroll = new IScroll('#wrapper', { click: true, preventDefault:...

0
0
发表于大前端专区
2014/09/10 15:57

iscroll使用遇到的两个问题

滑动区域点击按钮会触发两次点击事件 往容器添加内容会导致页面下半段闪烁

1
4
发表于大前端专区
2017/12/08 15:52

iscroll水平滑动小案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=0"> <title>Document</title> <s......

0
0
发表了博客
2019/08/06 11:50

iscroll 上拉加载和下拉刷新

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0"> <title>Title</title> <script src="js/jquery.min.js"></script> <script src="js/iscroll.js"></script> </head> <style> *{margin:0px;padding:0px;...

0
0
发表了博客
2018/09/13 11:53

使用iscroll,无法正常滑动的原因

iscroll的dom元素的结构是固定的,swiper是容器,scroll是需要滚动的容器,list是滚动的内容 <div class="swiper"> <div class="scroll"> <div class="list"></div> </div> </div> tips: 1、swiper定位必须为relative,并且高度设置固定值,overflow:hidden; 2、swiper的高度一定要小于scroll的高度...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了问答
2013/04/10 15:18

iscroll 上拉下拉刷新AJAX后,样式有问题

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="appl...

5
5
发表了问答
2012/11/29 14:39

手机网站在iPhone和Andriod的position:fixed替代方案

问题背景 : 一个WebApp要做的像个App,多半会需要一个固定位置的头部、工具栏之类的效果,多半你会想到position:fixed;然后发现 哎呀 ,iOS的Safari上position:fixed;居然无效 解决问题前先来看看问题是怎样产生的: Apple是这样解释的 Safari on iPad and Safari on iPhone do not have resizable windows. In Safari...

3
2
发表了问答
2015/12/21 14:26

iscroll在IOS左右滑动同时上下滑动无效

iscroll在IOS左右滑动同时上下滑动无效,要么只能上下滑动、要么只能左右滑动、不能同时上下左右滑动、android就不存在这个问题、忘各位大神相助

1
0
发表了问答
2016/01/20 21:13

iscroll模拟手机端下拉刷新功能时,打开初始化的时候默认要下拉一下。这个能够去掉吗

iscroll模拟手机端下拉刷新功能时,打开初始化的时候默认要下拉一下。这个能够去掉吗 就是打开list页面默认要下拉一下。 如题,哪位大神知道如何修改

1
0
发表了问答
2015/11/26 09:39

需要做一个webapp下拉刷新效果~除了基于iscroll.js有没有其他的组件推荐的~

需要做一个webapp下拉刷新效果~除了基于iscroll.js有没有其他的组件推荐的~ 看了很多,大部分都是基于iscroll.js开发的,这个需要用ul,li的结构,我的列表页面使用div直接写的,直接用的话要改很多东西,哪个大牛知道有好的html5 的下拉刷新的插件推荐一下~好人一生平安~

5
0
发表了问答
2014/12/08 16:48

iscroll5 设置了左右滑动的轮播,但垂直滑动就被禁止了如何解决

iscroll5 设置了左右滑动的轮播,但垂直滑动就被禁止了如何解决 在手机端 当触摸点从轮播开始向上滑动时,页面无反应,必须要从 轮播外向上滑动才能使页面默认的滚动起作用 这个怎么破啊?

1
0
发表了问答
2014/09/27 18:13

JQM+iscroll上拉刷新时,列表中添加了数据,滚动条却没有改变,需二次上拉才正常显示

@牛牛不怕 你好,想跟你请教个问题:您好,我在做JQM+iscroll上拉刷新时,上拉第一次的时候,列表中利用ajax往添加了数据,滚动条却没有改变,需二次上拉才正常滚动下去看新添加的内容,那该怎么解决。我急着这两天给别人,麻烦你帮忙看一下怎么办。 pullUpAction功能如下: function pullUpAction () { $.ajax({ type :...

2
0
发表了问答
2014/12/31 17:44

Javascript中addEventListener的参数问题

我在阅读iScroll源代码的时候发现: _bind: function (type, el, bubble) {     (el || this.scroller).addEventListener(type, this, !!bubble);          console.log(this);      },   _unbind: function (type, el, bubble) {     (el || this.scroller).removeEventListener(type, this, !!bubble);   }, addEventListener的第...

1
0
发表了问答
2014/10/17 10:08

iscroll链接,打开是弹窗,ipad无法打开

如题,使用iscroll后,内容的链接,是以弹窗的方式打开超链接,有什么解决方案吗?弹窗在ipad上无法打开

1
0
发表了问答
2014/09/09 16:38

点击按钮使<tbody> slideDown()和slideUp()。微信内置浏览器,只点了一下,却显示连点两下的效果。求助。

function showMore(obj,clazzName,downImg,upImg){ var curImg = $(obj).attr("src"); if(curImg == downImg){ $(obj).attr("src",upImg); $("."+clazzName).slideDown(function(){ if(!$("."+clazzName).is(":animated")){ if (myScroll != undefined && my...

2
1
发表了问答
2014/09/03 13:32

iscroll在Android4.4里面不起作用

我是通过使用webview打开服务器的网页,服务器网页有用到iscroll,在浏览器上可以出来效果,在Android4.2上面也能出来效果,但是在Android4.4上面就没有效果了,大神帮忙解决下啊,在线等。。。 webview = (WebView) findViewById(R.id.webView); qrImgImageView = (ImageView) findViewById(R.id.iv_qr_image); WebSett...

1
0
发表了问答
2013/12/09 10:18

Iscroll在android中遇到的事件不响应的问题

各位大神,小菜从事android开发几个月,以前从来没有参与个类似的项目,不敢妄自断言,因此请各位大神教育一下。我用PhoneGap开发的移动web项目,引用iscroll做效果设计,之前最高系统4.3以下的都可运行无误,可是前些天突然发布的4.4就让小菜我瞬间泪奔了,系统整体都可以跑起来,唯独引用的iscroll框架的<li>标签添加的...

2
0
发表了问答
2011/12/29 20:50

iScroll 4 框架 使用改框架来设计滚动效果,效果是很好,但是有时滚动的内容会溢出页面,。各位帮忙指导。谢谢了。。

iScroll 4 框架 使用改框架来设计滚动效果,效果是很好,但是有时滚动的内容会溢出页面,是整个手机的页面变成了空白,所有的内容都滚出去了。。这个怎么解决啊。。各位同仁帮帮忙啊。。。谢谢了!!

5
0
发表了问答
2013/08/08 14:12

iscroll4文本框输入后会列表内容溢出导致上下滑动出现偏离

在iscroll4的例子上添加了几个文本框 然后发现在点击文本框的时候如果文本框的位置在弹出键盘的上方则没有事,如果弹出的键盘正好覆盖文本框 这个时候如果在文本框内输入文字会把iscroll4滑动区域的内容向上移动 然后导致滑动区域上下滑动位置出现偏移。例如图片中第6行向上的内容拉不下来。 起初查看资料认为是iscroll...

2
0
发表了问答
2013/02/26 16:39

使用iscroll插件时,数据只显示了一部分,滚动条没启动效果。

附上代码: js代码: <script type="text/javascript"> var myScroll; function loaded() { setTimeout(function () { myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' }); }, 100); } window.addEventListener('load', loaded, false); </script> 页面代码: <div id="wrapper"> <div id="scroller...

3
0
发表了问答
2013/04/09 16:35

iscroll4 滑动问题。

用指头猛划一下。然后指头离开。div会惯性地滑动一段距离...我不希望它惯性地滑动这一段。。怎么处理

1
0
发表了问答
2013/03/11 11:26

iscroll 如何判断左右滑动

1
0
发表了问答
2013/07/25 11:35

iscroll滑动使其他元素滑动失效

我用jquerymobile做了一个页面,底部导航可以切换页面,当我在一个页面实现iscroll的滚动效果时,其他页面的滑动就失效了,什么原因,求解啊

1
0
发表了问答
2012/07/19 17:20

iScroll 4 在做左右滑动的时候上下就被禁止了...

求解...不知道要怎么解决了...

5
0
发表了问答
2011/12/29 08:49

iScroll 框架怎么控制页下面的那个footer区域???

iScroll 框架 展示滚动的效果,想控制滚动区域下面的那个区域。开始以为下面那个区域类似于JQuery Mobile 里面的 footer 但是当我去掉那个区域的时候,下面还是有一个层。iSrcoll的例子代码如下:<div id="header"></div> <div id="wrapper"> <div id="scroller"> </div> </div> <div id="footer"></div> 开始以为 id 为...

3
1
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
1 评论
55 收藏
分享
返回顶部
顶部