- 综合排序
- 最热优先
- 最新优先
- 来自专栏IMWeb前端团队
iScroll学习小结
_execEvent('scroll'); } 缺点与使用问题 下面是针对版本5.1.3的iscroll使用过程中的一些问题 1. 没有插件版 iScroll没有zepto/jquery插件版本，一些基础方法都需要自己实现，导致了库的体积偏大。 2. 没有暴露停止滑动（惯性滑动）的接口 通过查看源代码找到了停止滑动的方法，如下： var iScroll = new IScroll({ /* ... */ }); //直接通过修改iScroll对象的状态来停止滑动 iScroll.isAnimating = false 3. 总结 在使用iScroll的过程中遇到不少坑，但使用起来还是比较容易的，文档也比较齐全。 iScroll在实现上也非常成熟，里面许多实现细节都是值得学习的
1.2K100发布于 2017-12-29 - 来自专栏IMWeb前端团队
iScroll学习小结
_execEvent('scroll'); } 缺点与使用问题 下面是针对版本5.1.3的iscroll使用过程中的一些问题 1. 没有插件版 iScroll没有zepto/jquery插件版本，一些基础方法都需要自己实现，导致了库的体积偏大。 2. 没有暴露停止滑动（惯性滑动）的接口 通过查看源代码找到了停止滑动的方法，如下： var iScroll = new IScroll({ /* ... */ }); //直接通过修改iScroll对象的状态来停止滑动 iScroll.isAnimating = false 3. 总结 在使用iScroll的过程中遇到不少坑，但使用起来还是比较容易的，文档也比较齐全。 iScroll在实现上也非常成熟，里面许多实现细节都是值得学习的
1.1K30发布于 2019-12-03 - iScroll作用于滚动区域的外层，只有容器元素的第一个子元素能进行滚动，其它子元素完全被忽略； 初始化方式: 1 var myScroll = new IScroll('#wrapper', { 2 mouseWheel: true,//开启鼠标滚轮支持 3 scrollbars: true//开启滚动条支持来自专栏全栈程序员必看
iscroll中文文档_如何正确使用
CDN: <script src="//ossweb-img.qq.com/images/js/<em>iscroll</em>_library/<em>iscroll</em>-5.2.0.js"></script> 最佳的html结构如下 5 ... 6 7
50010编辑于 2022-09-20
移动端框架 滚动类 iScroll5
本文讲解了使用iScroll5的使用方法，解决了固定高度的容器内滚动内容。 iscroll诞生的意义 之所以iscroll会诞生，主要是因为无论是在以前的iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容 这个问题可以使用iScroll框架进行解决。 之前一直都在使用iScroll4.0版本，后来查到iScroll5已经比较稳定了（即度过了“测试版”），于是转到了5这个版本上，不过~iScroll5和iScroll4的差别有些大，包括语法都发生了很大的变化
学习滚动插件iScroll的简单使用
iScroll介绍 iScroll是一个高性能，资源占用少，无依赖，跨平台的javascript上拉加载，下拉刷新的滚动插件，目前版本v5.2.0。 GitHub下载地址：https://github.com/cubiq/iscroll iScroll版本 iScroll进行了不同的优化，为了达到更高的性能，iScroll分为了多个版本，你可以根据项目选择最适合的版本 目前有以下版本： iscroll.js，这个版本是常规应用的脚本。它包含大多数常用的功能，有很高的性能和很小的体积。 iscroll-lite.js，精简版本。 iscroll-probe.js，探查当前滚动位置是一个要求很高的任务,这就是为什么我决定建立一个专门的版本。如果你需要知道滚动位置在任何给定的时间,这是iScroll给你的。 （我正在做更多的测试,这可能最终在常规iscroll.js脚本，请留意）。 iscroll-zoom.js，在标准滚动功能上增加缩放功能。
iScroll上拉加载下拉刷新 -> 遇到的问题
上拉加载下拉刷新，在网上找的大部分代码都能用点，但是感觉不是特别的友好，总是有点缺陷，都得需要自己修改，缺陷比如：
IScroll的那些事——内容不足时下拉刷新
之前项目中的列表是采用的IScroll，但是在使用IScroll有一个问题就是：当内容不足全屏的时候，是木有办法往下拉的，这样就达不到刷新的目的了。
iScroll5 表单元素无法失焦 解决方法
iScroll5 表单元素无法失焦 解决方法 HTML5学堂：iScroll框架从4版本升级到5版本之后，很好的解决了滚动区域中表单元素不能聚焦的问题，但是，2014年年底测试的时候发现了5版本的一个问题 后来自己翻阅了iScroll5的文档，还是没有找到相关的解决办法（如果各位有查找到解决办法，欢迎沟通交流）。于是，就只能另辟蹊径，解决这个问题了。 基本功能基于了两个框架，分别是jQuery和iScroll。 测试效果，能够正常失焦： ? 代码解释：上图为在input中输入了文字，然后点击了滚动区的任意位置，input实现失焦。 $('body').click(function(){$('input').blur();}) PS：iScroll5，在小米中相当卡。 另外，在小米机器上不能够聚焦（可以尝试采用iScroll4试试，看看是不是卡顿） 关于iScroll5的功能可以查看文章《移动端框架 滚动类 iScroll5》
iScroll click事件触发两次的解决方案
iScroll呢其实是截获了点击浏览器时的touchstart和touchend事件。在touchend的时候使用js去触发元素的onclick事件(_end这个函数)。 网上有很多代码说解决“iScroll click事件”点击一次触发两次，我也是按着各位大神的步骤写的，但是依旧不成功，也可能是操作不对，我附上我的执行操作的代码，我的已经成功。 解决方案2：在iscroll搜索that.doubleTapTimer将其注释掉 或者 直接注释以下557-573行即可！ /*! * iScroll v4.2.5 ~ Copyright (c) 2012 Matteo Spinelli, http://cubiq.org * Released under MIT license == 'undefined') exports.iScroll = iScroll; else window.iScroll = iScroll; })(window, document); ----
iscroll实现移动端下拉刷新，上拉加载更多
format-detection" content="telephone=no"> <meta name="format-detection" content="address=no"> <title>iscroll type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="js/<em>iscroll</em>.js "></script> <script type="text/javascript" src="js/getList-<em>iscroll</em>.js"></script> <script type="text/javascript document.getElementById('pullUp'); pullUpOffset = pullUpEl.offsetHeight; myScroll = new <em>iScroll</em>
模拟微信下拉页面
在安卓下 始终不够完美，今天遇到了 iscroll.js，使用 iscroll.js 重新写了一个版本，现在比较完美了。 模拟微信下拉提示的页面 ? <! minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no"> <script src="https://cdn.bootcss.com/<em>iScroll</em> /5.2.0/<em>iscroll</em>.min.js"></script> <style> body { background: #0099EC; } .wechat_from return supportsPassiveOption; } window.onload = function() { myScroll = new IScroll
模拟微信下拉页面
在安卓下 始终不够完美，今天遇到了 iscroll.js，使用 iscroll.js 重新写了一个版本，现在比较完美了。 模拟微信下拉提示的页面 <! minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no"> <script src="https://cdn.bootcss.com/<em>iScroll</em> /5.2.0/<em>iscroll</em>.min.js"></script> <style> body { background: #0099EC; } .wechat_from return supportsPassiveOption; } window.onload = function() { myScroll = new IScroll
从零开始学 Web 之 移动Web（五）touch事件的缺陷，移动端常用插件
1、iScroll 以下为官方介绍： iScroll是一个高性能，资源占用少，无依赖，多平台的 javascript 滚动 插件。 它可以在桌面，移动设备和智能电视平台上工作。 iScroll不仅仅是 滚动。它可以处理任何需要与用户进行移动交互的元素。在你的项目中包含仅仅4kb大小的iScroll，你的项目便拥有了滚动，缩放，平移，无限滚动，视差滚动，旋转功能。 即使平台本身提供的滚动已经很不错，iScroll可以在此基础上提供更多不可思议的功能。具体来说： 细粒度控制滚动位置，甚至在滚动过程中。你总是可以获取和设置滚动器的x，y坐标。
实现图片懒加载
支持iScroll, iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。 这里我们做了些优化 图片加载后移除选择器，避免重复判断。 selector || '.m-lazyload'; this.getNode(); _delay();//避免首次加载未触发touch事件,主动触发一次加载函数 if (defaults.iScroll ) { defaults.iScroll.on('scroll', _delay); defaults.iScroll.on('scrollEnd', _delay); } else
吸顶效果解决方案
监听滚动判断位置的方法完全失效，平滑吸顶效果变成了滚过临界位置直到停止滚动时，吸顶元素跳到目标位置，体验非常差，不可忍受 scroll不能用，但还可以有一些奇怪的思路，比如定时器读scrollTop，touchmove，iscroll 也能拿到scrollTop，但touchend后，惯性滚动期间，没有任何事件可用，拿不到这段的scrollTop，很难预测这段惯性滚动距离（减速运动），甚至不确定各IOS版本这段距离的计算方式是否相同 iscroll 这种假滚动，自然可以实时获取滚动位置，iscroll有一个专用版本来做这个事情： iscroll-probe.js, probing the current scroll position is a demanding If you need to know the scrolling position at any given time, this is the iScroll for you. (I’m making some more tests, this might end up in the regular iscroll.js script, so keep an eye on it
移动端常用开发插件和框架
其他移动端常见插件 lsuperslide： http://www.superslide2.com/ l iscroll： https://github.com/cubiq/iscroll 1.5. 既能开发PC端，也能开发移动端 前端常用的移动端插件有 swiper、superslide、iscroll等。 框架： 大而全，一整套解决方案 插件： 小而专一，某个功能的解决方案 2. 2.
Vue移动端 Web App 点击穿透问题解决方案
页面当中使用了 iScroll 来实现页面局部滚动，在 iScroll 的配置当中把 tap 和 click 事件都开启了。 代码如下： this.myScroll = new IScroll(this.
移动端复杂表格表头
table.gif 方法一：iscroll 插件版 第一步：npm install 引入 iscroll npm i iscroll --save 第二步：封装 对插件再做一层封装，封装成 iscrollTable.js 方便调用，代码如下： // 统一使用 const iScollProbe = require('iscroll/build/iscroll-probe'); let scroller = null; scroller = new iScollProbe(Selector, { preventDefault: false, // 阻止浏览器滑动默认行为 probeType: 3, //需要使用 iscroll-probe.js eventPassthrough: false, //使用 IScroll 的横轴滚动时，如想使用系统立轴滚动并在横轴上生效，请开启。
20款移动开发中很有用的 jQuery 插件
is a simple tool to allow for trackpad swipeevents when you have disabled scrolling on your site. 7. iScroll iScroll is a high performance, small footprint, dependency free, multi-platform javascript scroller. iScroll can handle any element that needs to be moved with user interaction.
移动端常用开发插件
其他移动端常见插件 lsuperslide： http://www.superslide2.com/ l iscroll： https://github.com/cubiq/iscroll 5.
