首页
学习
活动
专区
工具
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:fixedios和android使用,而ios4(4以及以前)系统以及以前安卓系统(2.3及以前)并不支持position:fixed。...之前一直都在使用iScroll4.0版本,后来查到iScroll5已经比较稳定了(即度过了“测试版”),于是转到了5这个版本,不过~iScroll5和iScroll4差别有些大,包括语法都发生了很大变化...如果希望ul中内容发生滚动,需要在外层添加一层,同时将iScroll功能添加到最外层。... iScroll实例化(与iScroll4版本有所区别,需注意): var myScroll = new IScroll('#wrapper'); i改成了大写。

1.2K90

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

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

57840
  • 移动端web开发笔记

    以下是历史原因: 2007年苹果发布首款iphoneIOS系统搭载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.6K20

    吸顶效果解决方案

    Android 4.0+确实可以,但IOS几乎全家都行不通 Android scroll Android 4.0scroll事件不那么实时(自带节流感觉),但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.5K10

    移动端爬坑记 --- (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会增加维护难度

    11610

    移动端问题收集和解决

    移动端300ms延迟原因 2、zeptotap事件是绑定在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实现也非常成熟,里面许多实现细节都是值得学习

    967100

    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

    20.7K52

    iScroll学习小结

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

    91130

    📚一站式解决: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

    64020

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

    前言 写前端页面时,对于超出内容,我们希望隐藏,同时保持垂直滚动,但是又不希望有丑陋垂直滚动条,那该怎么去实现呢 实现方式有很多种,可以用iscroll插件,也可以用css去解决 01 方法1-...计算滚动条宽度并隐藏起来 这种方法主要是通过计算滚动条宽度,给隐藏起来,如下示例所示 具体片段代码如下所示 <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使用 页面引用 HTML结构

    2.9K30

    移动端Webapp中那些Bug

    这个方法只能部分防止,某些时候还是会触发出界。2. 有说全局滚动下和局部滚动下会有差异,但是就我测试情况来说,差异并不是特别大。可能是版本太高原因,具体结论还待测试更多机型。...2.2 解决方案 爬墙爬到这么一个issue,3楼eddiemonge老哥说到了,IOS下除非用户手动触发了输入框focus事件,才会触发键盘,至于设置定时器也是不管用;但是,手动点击一个按钮,在按钮操作中再来执行...我有一个登录页面,聚焦之后需要往上弹一下,android正常,然后IOS还同时引出了一个BUG:输入框上去了,但是光标却在下面闪。怎么办呢?...href="javascript:;" id="link">link 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延迟 zeptotouch模块,tap事件也是为了解决click延迟问题 触摸事件响应顺序 ontouchstart ontouchmove...手指按住屏幕拉,底部多出一块白色区域。 iOS 中,手指按住屏幕上下拖动,会触发 touchmove 事件。...如果该元素已经浏览器窗口可见区域内,则不会发生滚动。 true,则元素将在其所在滚动可视区域中居中对齐。 false,则元素将与其所在滚动可视区域最近边缘对齐。

    4.2K20

    移动端滚动研究

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

    3.2K20
    领券