解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题

解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题

div{
     width: 100%;
     overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
} 

在使用overflow的的地方加上?-webkit-overflow-scrolling: touch;便可解决页面在ios机器上卡顿的问题。

解决由-webkit-overflow-scrolling: touch 引起的ios滚动条(将滚动条显示为不可见)

::-webkit-scrollbar {
    display: none;
}

在样式中将滚动条的显示设置为none,但是滚动条的滚动效果还是有的。

原文地址:https://www.cnblogs.com/rachelch/p/9146061.html

时间: 2024-10-01 06:52:47

解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题的相关文章

解决:ScrollView中嵌套ListView,使得listview上下滑动卡顿现象

效果图就是上面的那样!实现方式:上面是一个ViewPager实现的左右无限循环并带有自动轮播的banner.在banner图的下面是一个listview实现上拉加载的功能:但是在我实现的过程中我遇到了一个问题,就是整个页面的展示效果都已经实现,但是banner图连带下面的listview在上下滑动的时候出现卡顿的现象:当然之前也遇到了一个问题,就是我的banner图和listview一起放在了父控件ScrollView中,是的listview不能完全显示:那么就来解决这两个问题. 解决问题一:<

手机版页面滑动卡顿的问题

一.实习过程中被要求做一个二级菜单,点击展开覆盖主页面.在手机上测试,滑动过程中十分卡顿. 在二级菜单最外层加上-webkit-overflow-scrolling:touch ,之后就完全消除卡顿问题. 通过搜索知道,overflow:scroll可以使内容可以滚动,但是没有物理弹性,比较生硬,没有滚动条.如果想要IOS那种弹性的滚动效果可以使用-webkit-overflow-scrolling:touch. 从前端开发的角度讲,只需要知道CSS的属性-webkit-overflow-scr

h5页面滑动卡顿解决方法

解决方式: 给滚动的元素加样式:-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling(允许独立的滚动区域和触摸回弹) 如果值为auto,就是普通的滚动,手指离开就停止滚动,让人感觉有点卡顿 如果设置为touch,在手指离开后还会滚一下,有回弹效果,看上去很流畅 但是刚开始用的时候有个小bug,h5页面打包成app时,一开始写成了*{-webkit-overflow-scrolling: touch;},导致滚动到最后页面底部出

android ListView使用软引用解决加载网络图片快速滑动卡顿

前段时间做了一个新闻类的项目,新闻列表中的图片都是网络图片,刚开始是自定义ImageView(等于是在其中加了一个异步下载然后设置背景)虽然可以加载网络图片,不过当快速滑动的时候会很卡顿,而且前期没有对Bitmap做回收,导致OOM(内存溢出),后来上网查了各种资料,大概有两种思路: 1.滑动的时候不加载图片,等滑动停止之后再加载,这样就需要对ListView进行OnScrollListener监听,得到屏幕上显示的开始和结束的位置(当有headView和footerView时需要换算)然后下载

解决使用了属性overflow:scroll、overflow-y:scroll、overflow-x:scroll;的网页在iPhone iOS Safari浏览器中滑动不流畅问题

在使用了属性overflow:scroll.overflow-y:scroll.overflow-x:scroll;的元素上加上-webkit-overflow-scrolling: touch;即可 参考资料: 解决页面使用overflow: scroll在iOS上滑动卡顿的问题 网页在Safari快速滚动和回弹的原理: -webkit-overflow-scrolling : touch;的实现 -webkit-overflow-scrolling 带来的 BUG

Android ListView只加载当前屏幕内的图片(解决list滑动时加载卡顿)

最近在做ListView分页显示,其中包括图片 和文字(先下载解析文字内容,再异步加载图片)发现每次点击下一页后,文字内容加载完毕,马上向下滑动,由于这时后台在用线程池异步下载图片,我每页有20条,也就是20张图片,会导致listview滑动卡顿! 这是用户不想看到的,我参考了网易新闻和电子市场等应用,发现它们都是只加载屏幕内的图片,不现实的不加载,于是我也仿照做了一个.我是菜鸟,我承认 呵呵,虽然不见得完全和他们的一样,但是确实解决了翻页时那一刻的卡顿现象. 因为未发现网上有相关文章,希望对朋

解决ios手机页面overflow scroll滑动很卡的问题

解决ios手机页面overflow scroll滑动很卡的问题 今天在IOS系统上测试 webAPPApp的时候发现使用了position:fixed/absolute时,DIV容器里面下滑动没有像普通页面一样顺畅,手滑到哪就停到哪.感觉很卡一样,而安卓效果正常,算是一个bug.终于在网上找到了一个解决方法. -webkit-overflow-scrolling:touch; 加上去后果然有用,也就是说DIV容器使用的定位属性引起的.当时效果是弹出一个层,body无滚动条,但是弹出层需要可以上下

[转] 设置div的overflow:scroll,但是在手机上滑动的时候有点卡顿

设置div的overflow:scroll,但是在手机上滑动的时候有点卡顿,所以在这个div上加一个css: -webkit-overflow-scrolling : touch; 在苹果手机上使用-webkit-overflow-scrolling:touch会导致使用固定定位的元素,随着页面一起滚动,只有滚动停止时才会恢复原位.如果不用这个属性的话,使用overflow-y:属性的盒子滑动非常不流畅, 解决方法: 使用overflow-y属性的元素不应该和固定元素在一个层级,使用overfl

通过overflow: scroll;来实现部分区域的滚动

在移动端中,我们希望元素的滚动,可以通过一些插件的使用来实现滚动,当然也可以自己来实现. 比如:对于某一个区域,我们可以限制好高度之后,设定:overflow-y: scroll; 这样,就可以实现滚动了,并且我们可以通过 overflow: scroll的元素的scrollTop来控制其行为. 但是,这种方法是存在问题的,因为在某些手机上回出现难看的滚动条,一般的解决方法是: ios: margin-right: -20px; padding-right: 20px; 当然,这个方法用在web