-webkit-overflow-scrolling与苹果

最新推荐文章于 2021-12-30 09:23:06 发布

转载最新推荐文章于 2021-12-30 09:23:06 发布 · 80 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hahahalalala/p/5895568.html

如果不用-webkit-overflow-scrolling：touch这个属性，会导致苹果机型滑动卡顿，不顺畅；

但是如果在整个body里加这个属性，万一你的其他部分用到fixed，苹果的表现就更加"精彩";

所以类似布局用header, main,footer.将这个属性加在main上，就能做到流畅的滚动……

转载于:https://www.cnblogs.com/hahahalalala/p/5895568.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30602505

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

-webkit-overflow-scrolling:touch; ios橡皮筋效果卡屏，滚动穿透 --已解决

fly_wugui的博客

05-30

2705

-webkit-overflow-scrolling 属性 MDN中概述入下 -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. 值选项 1、auto 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止 2、touch 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的...

-webkit-overflow-scrolling引起的bug

热门推荐

weixin_36094484的博客

07-08

1万+

上一次写移动端项目还是一年前，哎，这两天复习了下，用react写了个小demo，然后在苹果上遇到了以前遇到的坑。现在很多移动端网站都是web mobile app，UI是类app的样子，能看到一些mobile站首页是顶部-内容-底栏结构。我的demo暂且按这种结构布局，主页div存放商品内容，上下滑动没有滚动动画效果。这时候自然想到有个-webkit-overflow-scrolling:touc...

参与评论您还未登录，请先登录后发表或查看评论

深入研究-webkit-overflow-scrolling:touch及ios滚动

Mr_Yan的博客

09-13

962

1. -webkit-overflow-scrolling:touch是什么？ MDN上是这样定义的： -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。 touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。 ...

vux-popup-dialog遮罩在最上层解决办法 z-index问题

Front小思的博客

07-12

2676

今天遇到的问题是，vux组件框架中使用弹窗，有多层弹窗，vux popup mask遮罩的z-index问题，找了相关解决方法，感觉那有点麻烦！一、改组件的源码在一个页面的子组件中引用vux的popup组件时，出现mask遮罩在最上层的问题，百度了一下发现有两种解决办法，现提供第三种。 popup在子组件引用时，vux将vux-popup-mask默认添加到body末尾，如果引用popup的子组件的根节点未添加z-index属性，子元素无论层级多高都会被遮罩，mask会在最上层。所以解决办法就是.

-webkit-overflow-scrolling:touch导致ios中z-index失效(弹窗层级设置无效)

qq_39189369的博客

12-30

2089

解决方法：直接去掉-webkit-overflow-scrolling:touch[不合理，页面卡顿] 弹窗放到根位置，也就是跟遮布平级[根下不存在含有-webkit-overflow-scrolling:touch] 动态修改-webkit-overflow-scrolling:touch的样式值 vant可以使用van-popup，添加teleport(3x)、get-container(2x) 的属性指定位置挂载(原理2一样) ...

关于-webkit-overflow-scrolling的使用

huaqishen123的博客

01-02

1600

用html做一个移动端上的app，在用到列表的时候，发现在ios设备上的列表滚动很ka，不流畅。在android上就不会。也是在网上搜索一番，发现是这个属性：-webkit-overflow-scrolling的问题。在ios上需要为滚动内容的父容器上增加这个属性，并将其值设为touch .scroll { -webkit-overflow-scrolling:touch; } 网上对...

关于 -webkit-overflow-scrolling:touch 的小bug

pan396365044的博客

12-30

9268

最近在写页面时遇到一个页面长度刚刚超过手机高度一点，所以页面这时是可以上下滑动的，在安卓手机上滑动很流畅，但是在苹果手机上下滑动时会出现卡顿回弹等现象导致不流畅；故我给body加了body{ -webkit-overflow-scrolling:touch; } 此时苹果手机滑动也流畅了，但是带来一个bug，页面中我有一处弹窗，弹窗的高度是刚好100%的，而且弹窗出现底部内容是不能滑动的，

-webkit-overflow-scrolling:touch及ios滚动问题

dk123sw的博客

01-02

1036

先贴原文地址目录 1. -webkit-overflow-scrolling:touch是什么？ 2. 解决safari布局抖动的例子 2.1 方案一 2.2 方案二 3. 探究-webkit-overflow-scrolling:touch偶尔卡住或不能滑动的bug 3.1 保证使用了该属性的元素上没有设置定位 3.2 如果添加动态内容页面不能滚动，让子元素height+1...

css 小案例文字超出 ... 显示、导航鼠标移入变色、鼠标移入图片放大、-webkit-overflow-scrolling : touch、单行文本两端对齐

夜阑珊妖妖

09-11

318

记录一下工作中常用的css 小案例吧。。 1. 实现文字超出 … 显示 div{ overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } 借鉴于：https://www.cnblogs.com/gopark/p/8875655.html 2. 导航鼠标移入变色添加动画效果，不再那么死板的直接变色 ...

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

08-03

总的来说，这个知识点涉及到了iOS设备上的Web开发，特别是CSS的`-webkit-overflow-scrolling`属性在优化滚动性能方面的作用，以及其可能带来的内存消耗问题。开发者在面对类似问题时，可以考虑使用这个属性来提升...

2022年单片机-第讲.ppt

09-10

2022年单片机-第讲.ppt

protobuf-lite-3.5.0-13.el8.tar.gz

09-10

# 适用操作系统：Centos8 #Step1、解压 tar -zxvf xxx.el8.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm

2020年大学生网络公司实习报告范文.doc

09-10

2020年大学生网络公司实习报告范文.doc

计算机工作总结范文.doc

09-10

计算机工作总结范文.doc

Excel表格模板：年终原材料领料、退料明细汇总表.xlsx