首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

寻找iScroll的替代方案(在iOS/Webkit上滚动Div)

寻找iScroll的替代方案(在iOS/Webkit上滚动Div)

iScroll是一个流行的JavaScript库,用于在iOS和Webkit浏览器上实现滚动效果。然而,随着技术的发展,iScroll已经不再是最佳选择。以下是一些建议的替代方案:

  1. 原生滚动

原生滚动是指使用浏览器的原生滚动功能。在大多数现代浏览器中,滚动性能得到了很好的优化,因此使用原生滚动可能是最佳选择。要实现原生滚动,只需在CSS中将overflow属性设置为autoscroll即可。

  1. TouchScroll

TouchScroll是一个轻量级的JavaScript库,用于在iOS和Android设备上实现平滑的触摸滚动。与iScroll相比,TouchScroll更容易集成,并且不需要对DOM结构进行任何更改。TouchScroll的GitHub仓库地址为:https://github.com/azoff/TouchScroll

  1. OverlayScrollbars

OverlayScrollbars是一个功能丰富的滚动条插件,它可以完全自定义滚动条的外观和行为。OverlayScrollbars支持横向和纵向滚动条,并且可以在任何浏览器中使用。OverlayScrollbars的GitHub仓库地址为:https://github.com/KingSora/OverlayScrollbars

  1. PerfectScrollbar

PerfectScrollbar是一个轻量级的JavaScript库,用于在Webkit浏览器中实现平滑的滚动效果。与iScroll相比,PerfectScrollbar更容易集成,并且不需要对DOM结构进行任何更改。PerfectScrollbar的GitHub仓库地址为:https://github.com/mdbootstrap/perfect-scrollbar

  1. SmoothScroll

SmoothScroll是一个轻量级的JavaScript库,用于在Webkit浏览器中实现平滑的滚动效果。与iScroll相比,SmoothScroll更容易集成,并且不需要对DOM结构进行任何更改。SmoothScroll的GitHub仓库地址为:https://github.com/galambalazs/smoothscroll-for-websites

总之,根据您的需求和目标浏览器,可以选择不同的替代方案。在大多数情况下,原生滚动是最佳选择,因为它不需要任何额外的库,并且具有良好的性能和兼容性。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

移动端框架 滚动类 iScroll5

iscroll诞生的意义 之所以iscroll会诞生,主要是因为无论是在以前的iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容...position:fixed在ios和android的使用,而ios4(4以及以前)系统以及以前的安卓系统(2.3及以前)并不支持position:fixed。...之前一直都在使用iScroll4.0版本,后来查到iScroll5已经比较稳定了(即度过了“测试版”),于是转到了5这个版本上,不过~iScroll5和iScroll4的差别有些大,包括语法都发生了很大的变化...如果希望ul中的内容发生滚动,需要在外层添加一层,同时将iScroll的功能添加到最外层上。... div> iScroll的实例化(与iScroll4版本有所区别,需注意): var myScroll = new IScroll('#wrapper'); i改成了大写。

1.2K90

纯CSS解决iOS下网页不满一屏header、footer随页面滚动问题

然而,还有很多网站或是Hybird APP还是选择了IScroll之类的三方库来模拟,不得不承认的是,类似IScroll使用CSS3来模拟iOS的Bounce效果,很不错,但有时候我们可能不希望使用IScroll....content下面的内容,也不至于整页滑动导致header、footer随滚动而动,但这么暴力的处理往往是不理想的(可能影响其他功能,且页面功能多时,可能出现js加载延迟,页面初始化完第一次还是可以滚动...,既然js实现可能滞后生效(首次不生效)又可能冲突,那么我们就在css中动点手脚,在.content下加一层min-height为100%+1px的块,如下:.content > .scroll-wrap...Bounce效果,尝试多个iOS系统,基本没有什么问题,只是1px的差异,遇到处女座可能有点纠结了。...PS:这个方法最终没有用到自己的项目上,因为自己项目是一个动态构建webapp的平台,组件都是第三方开发的,可能会有高度100%的需求,且不希望使用CSS3的vh等来实现全屏高,所以希望主体部分下元素可以继承主体高度

60440
  • 移动端web开发笔记

    以下是历史原因: 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上,使用了双击缩放(double tap to zoom)的方案,...{color:#EEEEEE;} 11、webkit表单输入框placeholder的文字能换行么 ios可以,android不行~ 12、 关闭iOS键盘首字母自动大写 在iOS中,默认情况下键盘是开启首字母大写的功能的...body元素的滚动条,所以一般都借助 iScroll; Android 3.0/iOS解决了非body元素的滚动问题,但滚动条不可见,同时iOS上只能通过2个手指进行滚动; Android 4.0解决了滚动条不可见及增加了快速回弹滚动效果...,不过随后这个特性又被移除; iOS从5.0开始解决了滚动条不可见及增加了快速回弹滚动效果 在iOS上如果你想让一个元素拥有像 Native 的滚动效果,你可以这样做: .xxx { overflow...fastclick 加快移动端点击响应时间 animate.css CSS3动画效果库 Normalize.css Normalize.css是一种现代的、CSS reset为HTML5准备的优质替代方案

    3.7K20

    吸顶效果解决方案

    在Android 4.0+确实可以,但IOS几乎全家都行不通 Android scroll Android 4.0的scroll事件不那么实时(自带节流的感觉),但Android 4.1之后scroll...,拿不到这段的scrollTop,很难预测这段惯性滚动距离(减速运动),甚至不确定各IOS版本这段距离的计算方式是否相同 iscroll这种假滚动,自然可以实时获取滚动位置,iscroll有一个专用版本来做这个事情...IOS 8+的Safari和WKWebView能够疯狂触发scroll,无论手指在不在屏幕上,无论是不是惯性滚动期间。...五.总结 一般元素吸顶:Android用scroll方案,在效果可接受范围内手动节流,提升性能;IOS用CSS sticky,如果不需要兼容IOS 8-以及任意版本UIWebView的话,也可以采用scroll...方案 吸顶tab列表:没有好的解决方案,暂用牺牲无缝切换的方案 整页iScroll是一个冒险方案,页面复杂的话,不要轻易尝试,即便页面不复杂,也难保以后不会变得复杂 参考资料 onscroll Event

    3.6K10

    移动端爬坑记 --- (1)布局与样式上的奇葩偶遇

    前言 汇总下自己搞移动端遇到掉进去的坑,以及脱坑的方案; Flex兼容 Flex想要兼容众多花样式手机,要注意以下这么些 前缀要考虑2009~2012年的语法[webkit-box,flex,flex-box....contain{ -webkit-overflow-scrolling : touch; } IOS 遮罩层较好方案 拒绝采用fixed!!!!!...IOS滚动窗滑动到底部还能弹窗拖拉的奇葩修复 这个方案是通过计算离底部多远加状态来阻止touch事件 // 防止内容区域滚到底后引起页面整体的滚动 var content = document.querySelector...border: 0; -webkit-appearance: none; } 旋转屏幕时,字体大小调整的问题 html, body, form, fieldset, p, div,...在部分机子过渡非常掉帧,体验非常糟糕,,遇到过好几次 页面有滚动区域的建议引入iscroll5,可以避免很多天坑 页面应该尽可能的减少复杂的DOM【一个功能点,DOM结构越直白,越好维护】,复杂DOM会增加维护难度

    12710

    移动端问题收集和解决

    移动端300ms延迟原因 2、zepto的tap事件是绑定在document.body上的,tap事件执行(冒泡之后)之前,click事件已经被”执行”,只是被延迟了而已,所以在tap事件用preventDefault...解决方案 1、当input元素focus时,改成position: absolute,blur的时候再将定位改为 position: fixed 2、使用iscroll库 3、使用div内滚动 消除 transition...闪屏 -webkit-transform-style: preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/ -webkit-backface-visibility: hidden...; /*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/ IOS字体大小重置 问题描述 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等) iOS 浏览器横屏时会重置字体大小,...设置 text-size-adjust 为 none 可以解决 iOS 上的问题,但桌面版 Safari 的字体缩放功能会失效,因此最佳方案是将 text-size-adjust 为 100% 。

    1.9K20

    iScroll学习小结

    前言 最近项目需要实现一个fixed标题栏的功能,很普通的功能,实现核心也是在sroll事件中切换到fixed状态即可,但是在某些版本ios的某些内核中,在惯性滚动过程中不执行任何js代码,亦即不会触发...scroll事件,基本任何事情都做不了,为了解决这个问题不得不使用div内滚动,然后使用iscroll库实现滚动逻辑。...在当前滑动状态的基础上,叠加新的滑动状态 //2....立刻停止当前的滑动,开始新的滑动 //iscroll使用的是方案2 //方案1对于状态处理,滑速计算等方面略偏复杂,但这是更加合理的处理策略(原生的scroll也是这样的) //...总结 在使用iScroll的过程中遇到不少坑,但使用起来还是比较容易的,文档也比较齐全。 iScroll在实现上也非常成熟,里面许多实现细节都是值得学习的

    979100

    12 个实用的前端开发技巧总结

    就是因为 img 隔绝了 click 的穿透,而我们希望的是,这个 img 只是视觉上遮挡了 input 的样式,但是点击的时候还是点击到 input。所以,只要让 img 可穿透即可。...直接修改 select 的样式的时候,一个奇怪的现象出现了,在 chrome 上调试的时候,自己定义的样式起了作用,在 Android 手机上也起了作用,但是到了 ios 手机上就不行了,典型的不兼容问题...开启弹性滚动 css 代码如下: body { overflow: scroll; -webkit-overflow-scrolling: touch; } 注意:Android 不支持原生的弹性滚动...,但可以借助第三方库 iScroll 来实现。...在输入框输入完内容并按回车的时候进行判断 比如说输入完 11000 在按下回车的时候。

    1.2K20

    3种方法实现CSS隐藏滚动条并可以滚动内容

    隐藏滚动条的同时还需要支持滚动,我们经常在前端开发中遇到这种情况,最容易想到的是加一个iscroll插件,但其实现在CSS也可以实现这个功能,我已经在很多地方使用了,下面一起看看这三种方法。...方法1:计算滚动条宽度并隐藏起来 在本站的侧栏,你可以看到前端日报的那块内容并没有滚动条,但鼠标移上去却可以滚动内容。这是什么技术呢? 其实我只是把滚动条通过定位把它隐藏了起来。...这个值是我手动调试得来的。在chrome和IE没发现问题。...方法2:使用三个容器包围起来,不需要计算滚动条的宽度 该代码最早是在Microsoft博客上看到的,跟我上面的思路差不多,只不过人家里面又加多了一个盒子,将内容限制在盒子里面了。...那就是自定义滚动条的伪对象选择器::-webkit-scrollbar,详情请看之前的文章:CSS3自定义webkit滚动条样式 chrome 和Safari .element::-webkit-scrollbar

    22.3K52

    iScroll学习小结

    ,但是在某些版本ios的某些内核中,在惯性滚动过程中不执行任何js代码,亦即不会触发scroll事件,基本任何事情都做不了,为了解决这个问题不得不使用div内滚动,然后使用iscroll库实现滚动逻辑。...在当前滑动状态的基础上,叠加新的滑动状态 //2....立刻停止当前的滑动,开始新的滑动 //iscroll使用的是方案2 //方案1对于状态处理,滑速计算等方面略偏复杂,但这是更加合理的处理策略(原生的scroll也是这样的) //...另一方面,在实现一个公共组件的时候可以考虑从组件本身来解决这个问题,iScroll通过配置来设置scroll事件的触发频率 //下面代码在_move方法里 //probeType == 1 则300ms...总结 在使用iScroll的过程中遇到不少坑,但使用起来还是比较容易的,文档也比较齐全。 iScroll在实现上也非常成熟,里面许多实现细节都是值得学习的

    92130

    📚一站式解决:H5开发全攻略,看这篇让你省时又省力

    解决方案 采用 flex 布局,align-items: center 来替代,兼容性更高。...⭐️⭐️Vue 单页应用在 iOS 上微信分享失效,图片,标题和描述均未正常显示,安卓上分享正常 原因 我们一般在 APP.vue 的 mounted 生命周期中初始化微信 SDK,此时页面的地址 hash...是#/,而首页的 hash 是#/home,导致初始化微信 SDK 时传入的分享 url 和用户实际触发分享操作时页面的 url 不一致,致使在 iOS 上分享失败。...img { -webkit-touch-callout: none; } ⭐️⭐️⭐️iOS 端微信 H5 页面上下滑动时卡顿 解决方案 给滚动元素加上-webkit-overflow-scrolling...body { -webkit-overflow-scrolling:touch; } ⭐️⭐️iOS 默认输入框内阴影重置 解决方案 阻止 iOS 默认的美化页面的策略-webkit-appearance

    90221

    css如何隐藏垂直滚动条但同时需保持滚动

    前言 在写前端页面时,对于超出的内容,我们希望隐藏,同时保持垂直的滚动,但是又不希望有丑陋的垂直滚动条,那该怎么去实现呢 实现方式有很多种,可以用iscroll插件,也可以用css去解决 01 方法1-...计算滚动条宽度并隐藏起来 这种方法主要是通过计算滚动条宽度,给隐藏起来的,如下示例所示 具体片段代码如下所示 div class="wrap"> div...{ display: none; } 03 方法3-使用webkit-scorllbar 通过CSS隐藏滚动条的方法,不过这个方法不兼容IE,做移动端的可以使用。...那就是自定义滚动条的伪对象选择器::-webkit-scrollbar .content::-webkit-scrollbar { width: 0 !...,同时隐藏掉滚动条的,如果不考虑IE兼容性,那么就可以直接使用第三种方式最简单,当然也可以使用一些第三方库,插件去实现的,比如iscroll的,具体用哪个,看自己的项目的,适合自己的才是最好的

    2.2K10

    学习滚动插件iScroll的简单使用

    iScroll介绍 iScroll是一个高性能,资源占用少,无依赖,跨平台的javascript上拉加载,下拉刷新的滚动插件,目前版本v5.2.0。...它不支持快速跳跃,滚动条,鼠标滚轮,快捷键绑定。但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版 是又小又快的解决方案(这个能应付大多数场景)。...iscroll-probe.js,探查当前滚动位置是一个要求很高的任务,这就是为什么我决定建立一个专门的版本。如果你需要知道滚动位置在任何给定的时间,这是iScroll给你的。...(我正在做更多的测试,这可能最终在常规iscroll.js脚本,请留意)。 iscroll-zoom.js,在标准滚动功能上增加缩放功能。...iScroll使用 页面引用 iscroll.js"> HTML结构 div id="wrapper">

    2.9K30

    移动端Webapp中的那些Bug

    这个方法只能部分防止,在某些时候还是会触发出界。2. 有说在全局滚动下和局部滚动下会有差异,但是就我测试的情况来说,差异并不是特别大。可能是版本太高的原因,具体结论还待测试更多机型。...2.2 解决方案 爬墙爬到这么一个issue,3楼eddiemonge老哥说到了,在IOS下除非用户手动触发了输入框的focus事件,才会触发键盘,至于设置定时器也是不管用的;但是,手动点击一个按钮,在按钮的操作中再来执行...我有一个登录页面,在聚焦之后需要往上弹一下,android上正常,然后IOS上还同时引出了一个BUG:输入框上去了,但是光标却在下面闪。怎么办呢?...href="javascript:;" id="link">link div> 在overlay下面放一个link,然后在overlay上绑定touchstart事件,在link上绑定click...4.2 解决方案 原因大致是:ios自带的输入居中效果,而带有fixed头部在页面被顶上去的同时没有重新计算位置,导致显示错误。

    3K50

    收藏 | 移动端H5开发常用技巧总结

    : none; -ms-user-select: none; user-select: none; } 清除输入框内阴影 在 iOS 上,输入框默认有内部阴影,以这样关闭: div { -...「解决方案」 在滚动容器上增加滚动 touch 方法 .wrapper { -webkit-overflow-scrolling: touch; } 设置 overflow 设置外部 overflow...解决方案: fastclick可以解决在手机上点击事件的300ms延迟 zepto的touch模块,tap事件也是为了解决在click的延迟问题 触摸事件的响应顺序 ontouchstart ontouchmove...手指按住屏幕上拉,底部多出一块白色区域。 在 iOS 中,手指按住屏幕上下拖动,会触发 touchmove 事件。...如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动。 true,则元素将在其所在滚动区的可视区域中居中对齐。 false,则元素将与其所在滚动区的可视区域最近的边缘对齐。

    4.2K20

    移动端滚动研究

    移动web滚动问题 在移动端如果使用局部滚动,意思就是我们的滚动在一个固定宽高的div内触发,将该div设置成overflow:scroll/auto;来形成div内部的滚动,这时我们监听div的onscroll...发现触发的时机区分android和ios两种情况,具体可以看下面表格: | 机型(内核) | body滚动 | 局部滚动 | | :-: | :-: | :-: | | ios | 不能实时触发 |...不能实时触发 | | android | 实时触发| 实时触发 | | ios wkwebview内核 | 实时触发| 实时触发 | 不能实时触发表现:只在手指触摸的屏幕上一直滑动时和滚动停止的那一刻才触发...方案比较 第一种方案由于惯性滚动的时机时由js自己控制所以可以拿到滚动触发阶段的scrolltop值,并且滚动的回调函数onscroll在滚动的阶段都会触发。...滚动和下拉刷新 方案1:借助iscroll的原理,整个页面使用模拟滚动,将下拉刷新元素放在顶部,当页面滚动到顶部下拉时,下拉刷新元素随着页面的滚动出现,当手指离开时收回,此方案实现起来较为简单直接借助iscoll

    3.2K20
    领券