网站首页 » 前端开发 » 移动WEB » iscroll 让移动 WEB 页面滚动如丝般顺滑
上一篇:
下一篇:

iscroll 让移动 WEB 页面滚动如丝般顺滑

前言

iscroll 是一个有关于移动端滑动的解决方案,但它又不仅仅只是滑动,还有一些其它的非常好用的功能,比如:图片放大,视觉差效果。

关于 iscroll 也没什么好说的,直接点开 demo 链接,你就可以感受到如丝般顺滑原来就这么简单。

iscroll 示例

http://yunkus.com/demo/iscroll/demos/2d-scroll/index.html
http://yunkus.com/demo/iscroll/demos/barebone/index.html
http://yunkus.com/demo/iscroll/demos/bounce-easing/index.html
http://yunkus.com/demo/iscroll/demos/carousel/index.html
http://yunkus.com/demo/iscroll/demos/click/index.html
http://yunkus.com/demo/iscroll/demos/event-passthrough/index.html
http://yunkus.com/demo/iscroll/demos/forms/index.html
http://yunkus.com/demo/iscroll/demos/horizontal/index.html
http://yunkus.com/demo/iscroll/demos/infinite/index.html
http://yunkus.com/demo/iscroll/demos/key-bindings/index.html
http://yunkus.com/demo/iscroll/demos/minimap/index.html
http://yunkus.com/demo/iscroll/demos/no-transition/index.html
http://yunkus.com/demo/iscroll/demos/parallax/index.html
http://yunkus.com/demo/iscroll/demos/probe/index.html
http://yunkus.com/demo/iscroll/demos/scrollbars/index.html
http://yunkus.com/demo/iscroll/demos/scroll-to-element/index.html
http://yunkus.com/demo/iscroll/demos/simple/index.html
http://yunkus.com/demo/iscroll/demos/snap/index.html
http://yunkus.com/demo/iscroll/demos/styled-scrollbars/index.html
http://yunkus.com/demo/iscroll/demos/snap/index.html
http://yunkus.com/demo/iscroll/demos/zoom/index.html

上面的这些 DEMO 已经够你用一辈子了。本以为iscroll 会给出一整套关于移动端的解决方法,但后面尝试了下,才发现这个真的只是一个 DEMO 。为什么这么说?iscroll 为我们提供了如丝般的顺滑,却没有在页面布局上多花点时间把在 IOS(Iphone 5s) 中的fixed 问题也解决了。查看示例代码你会发现 iscroll 页面布局也非常简单实用。上中下,分别都受用绝对定位(absolute)。如果你在下面的元素添加一个 input 输入框后,在 IOS 中点击输入框时你会发现底部会离手机键盘有一个很大的空隙。最近一直在研究这方面的东西(输入框如:input、textarea)在 IOS 及 安卓下的展示问题也可以卞是兼容方案,但到现在为止还没找到比较好的解决方案。这是之前的一篇文章,但我觉得还不是最好的方案,只作记录用有兴趣的可以看这里《移动端布局解决方案》。跟 iscroll 的一样,键盘弹出后,底部元素会与键盘有一个很大的空隙。

相关资料

iscroll 官网:http://iscrolljs.com/

帮助文档:http://yunkus.com/demo/iscroll/iscroll-doc.pdf

你可以到官网中查阅帮助文档。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/iscroll/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END