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

最新推荐文章于 2022-11-29 10:34:12 发布
最新推荐文章于 2022-11-29 10:34:12 发布
阅读量1k 收藏
点赞数
原文链接：http://www.cnblogs.com/Arlar/p/5725908.html
版权

在使用了属性overflow:scroll、overflow-y:scroll、overflow-x:scroll;的元素上加上-webkit-overflow-scrolling: touch;即可

 

在IPhone上对div盒子设置高度height:XXXpx并使用overflow-y:scroll使盒子出现滚动条可能与浏览器自身滚动条冲突导致滑动不流畅

 

参考资料：

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

 

网页在Safari快速滚动和回弹的原理： -webkit-overflow-scrolling : touch;的实现

-webkit-overflow-scrolling 带来的 BUG

转载于:https://www.cnblogs.com/Arlar/p/5725908.html

banyi5246
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
overflow-touch:在 iOS Safari 上使用 overflow-y 的 Web 元素的简单通知覆盖，通知他们可以使用两个手指滚动
07-09
溢出触摸 这是一种非常简单的方法，可以告诉使用 Safari 的 iPhone/iPod Touch/iPad(?) 用户，他们可以使用两根手指滚动浏览页面元素，否则在完整浏览器中将具有滚动条（overflow-y CSS 属性设置为除了没有之外的其他东西）。 用法 假设您没有为您的网站使用特别奇特的架构，只需将 repo 中的文件放入您的 webroot 并从您的 webroot 中的任何页面调用 setIosOverlay 函数。 该函数接受参数 element_id，它是您希望叠加层出现的元素的 DOM id。 例子 在您的<head> ，添加以下引用： [removed][removed] 在您的<body>末尾附近，在您要应用叠加层的元素声明之后的某个位置： <script typ
解决使用了属性overflow:scroll、overflow-y:scroll、overflow-x:scroll；的网页在iPhone iOS Safari浏览器中滑动不流畅问题
10年职场两茫茫，35岁凄凉奈若何
08-19 395
解决使用了属性overflow:scroll、overflow-y:scroll、overflow-x:scroll;的网页在iPhone iOS Safari浏览器中滑动不流畅问题
手机端局部滚动问题 overflow-y:auto|scroll无效的解决办法
xingbipai5492的博客
12-25 2万+
手机端局部滚动问题 overflow-y:auto|scroll无效，使用iscroll解决，发现部分安卓手机还是不支持。 最终，使用的Swiper插件，模拟局部滚动效果实现的，比isscroll好用。（测试的时候，需要把应用软件卸载，重新安装一遍就可以了。） 代码如下： &lt;div class="big_box"&gt; &lt;div class="swiper-containe...
CSS3自定义滚动条样式 -webkit-scrollbar
difeiwa4698的博客
06-02 287
::-webkit-scrollbar {/*隐藏滚轮*/display: none;} 前言 webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。 演示 来看看这2个滚动条demo：demo1（图片版）、demo2（纯CSS3版） 滚动条组成 ::-w...
ios兼容问题（二）：ios下overflow:scroll卡顿：
mosowe
08-17 917
ios下overflow:scroll卡顿： 添加以下css代码，即可解决： -webkit-overflow-scrolling: touch;  
解决页面使用overflow: scroll在iOS上滑动卡顿的问题1
08-03
标题中的“解决页面使用overflow: scroll在iOS上滑动卡顿的问题1”指的是在iOS设备上，当HTML元素使用CSS属性`overflow: scroll`时，滚动可能会变得卡顿不顺畅。这个问题通常不会在Android设备上出现，使得开发者...
CSS中overflow:scroll怎么设置只上下滚动而不左右滚动
09-25
对于Internet Explorer（特别是早期版本）的兼容性问题，`scrolling`属性在`<frame>`或`<iframe>`标签中使用，而不是在CSS中。`scrolling="yes"`会始终显示滚动条，`scrolling="no"`则会隐藏滚动条，而`scrolling=...
css 设置overflow:scroll 滚动条的样式
01-19
css 设置overflow:scroll 滚动条的样式 /* 定义滚动条样式 */ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: rgba(240, 240, 240, 1); } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-...
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
01-19
大家可以发现，上网站上查询之后会得到overflow-x和overflow-y的一大堆属性值，但很多网站并没有详细说明各属性值的效果，我们今天细说一下。 各属性值如下： visible：默认值，不裁剪内容，可能会显示在内容框...
css的overflow:scroll与ios
zhuhaomingoo的博客
10-30 1290
周末了，现在把上周所遇到的问题以及学到的一些新知识做一总结。在上次的一个混合开发中，我的H5页面嵌入到原生app,由于是静态页，跳转都是用Angular在原生里做的处理，数据过长在于是就是用了: css的“overflow-y:scroll;” 属性。在安卓系统中看页面无卡顿，滚动良好。可在ios系统中滚动卡顿甚至划不动的现象，原因是overflow：scroll；与ios自带的滚动相冲突取了
【兼容性】ios上设置overflow: scroll不滚动bug
热门推荐
生如夏花 炫至茶靡
10-13 2万+
背景 目前遇到这么一个问题：我有一个可以向下展开的下来菜单，菜单初始高度大于300px左右，没有超过手机屏幕高度，当展开的时候如果超过手机屏幕高度时让父元素出现滚动条滚动，就是说内容的高度是动态的。 描述 此前我通过js动态获取屏幕高度，并设置为父元素的max-height。然后设置父元素overflow-y: scroll; 起初，我大概的代码布局如下： &lt;div className...
移动端如何实现横向和纵向都滚动，better-scroll实现横向和纵向双向滚动
zyf_baby的博客
07-23 1556
因项目需要，要实现横向和纵向双向滚动的功能，自己手写了一个结果ios和android不兼容。。。 后来发现大神的better-scroll可以实现，但也是频频踩坑，这几个配置间有冲突，搞不好还不能实现双向滚动，结果要加班，哈哈 那接下来就总结一下我实践成功的方法，先看效果图 开始讲解 环境和版本 这个是在vue中自己封装的组件 "vue": "^2.5.2", "better-scroll": "^1.15.2", 组件 <template> <div> &l
scroll-view安卓滚动不生效
DyuanH的博客
07-06 773
参考博客 问题 scroll-view竖向滚动，高度为100vh时，在模拟器以及IOS上都正常滚动，在android系统上却无法滚动。 解决 需要在样式加上overflow-y: scroll;
iScroll版本
weixin_42235173的博客
06-05 273
版本 针对iScroll的优化。为了达到更高的性能，iScroll分为了多个版本。你可以选择最适合你的版本。 目前我们有以下版本： iscroll.js，这个版本是常规应用的脚本。它包含大多数常用的功能，有很高的性能和很小的体积。 iscroll-lite.js，精简版本。它不支持快速跳跃，滚动条，鼠标滚轮，快捷键绑定。但如果你所需要的是滚动(特别是在移动平台) iScroll 精简版 是又小又...
子页面滑动与字体发虚
qq_38105524的博客
01-25 807
#my{ position: fixed; // 文字发虚 设置为整除的px后就好了 // top:11vh; //520 217不发需519发虚 top:calc(11vh + 9px); bottom:0; overflow-y:scroll; overflow-x:hidden; scrollbar-color: rgb...
safari看html5卡顿,MacOS下Safari 10浏览器卡顿解决方案整理 - YangJunwei
weixin_30800615的博客
07-16 2814
新年第一篇，老杨分享一下关于解决 MacOS 下 Safari 10 的那些卡顿的糟心事儿！好像从 Safari 10 开始，已经开始感觉 Safari 有点卡顿，也许是跟我使用习惯有关：经常性的打开50个以上的页面……无论怎样吧，卡顿已经出现，着手解决一下。如果你也卡顿的烦恼，有如下几个方案，可以尝试一下！方案一：清除 Safari 缓存 Cache.db这个方案是从苹果官网找到的，先说说解决方...
ios（safari）浏览器滑动卡顿，橡皮筋效果解决
南宫凌萱的博客
02-25 2752
滑动卡顿：  html,body{             width:100%;             height:100%;         }         *{           -webkit-overflow-scrolling: touch;         } 设置 -webkit-overflow-scrolling: touch;则可以解决大部分问题 橡皮筋效果：...
css中overflow-x:scroll和overflow-y:visible不能同时生效的问题
zyh314的博客
05-11 1316
起因: 工作中遇到需要overflow-x:scroll和overflow-y:visible同时生效的问题 原因: W3C的解释: The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visib
Vue：overflow-y:scroll下pc端鼠标可以滚轮滚动，移动端手指不能滑动的问题
Lyang666的博客
11-29 3356
移动端滚动布局
解决页面使用overflow: scroll，overflow-y:hidden在iOS上滑动卡顿的问题
最新发布
05-30
在 iOS 上，使用 `overflow: scroll` 或 `overflow-y: hidden` 可能会导致页面卡顿。这是因为 iOS 在处理滚动时使用的是软件渲染，而不是硬件加速。为了解决这个问题，可以尝试以下几种方法： 1. 使用 `transform: translateZ(0)` 开启硬件加速 将要滚动的元素的样式设置为 `transform: translateZ(0)`，可以开启硬件加速，从而提高滚动的性能。 ```css .scroll { overflow: scroll; -webkit-overflow-scrolling: touch; transform: translateZ(0); } ``` 2. 使用 `will-change` 预先声明动画属性 使用 `will-change` 预先声明要进行动画的属性，可以让浏览器提前做好优化，从而提高滚动的性能。 ```css .scroll { overflow: scroll; -webkit-overflow-scrolling: touch; will-change: scroll-position; } ``` 3. 使用 `requestAnimationFrame` 控制滚动 使用 `requestAnimationFrame` 控制滚动，可以让滚动更加平滑，从而提高滚动的性能。 ```js var scrollEl = document.querySelector('.scroll'); var lastScrollTop = 0; var ticking = false; scrollEl.addEventListener('scroll', function() { lastScrollTop = scrollEl.scrollTop; if (!ticking) { window.requestAnimationFrame(function() { scrollHandler(lastScrollTop); ticking = false; }); } ticking = true; }); function scrollHandler(scrollTop) { // 处理滚动 } ``` 以上是三种解决 iOS 上使用 `overflow: scroll` 或 `overflow-y: hidden` 导致页面卡顿的方法，可以根据实际情况选择适合自己的方法来解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值