Scrolling DIV and Canvas flicker on iPhone/iPad touch

简介:

最近一直在优化一个网站,为了使其能在移动设备上有更好的用户体验,我们做了许多调整,包括将所有的Flash和Silverlight控件替换成HTML5,以及添加一些针对触屏的事件等。在下一篇文章中我会介绍一些针对触屏开发的技巧。

  DIV元素默认的滚动条在iPhone和iPad会消失,其实这个问题不是代码或CSS本身的问题。Apple默认将其系统上所有的滚动条都隐藏起来了,当然这也包括HTML元素。在Apple设备上,默认行为是当用户触摸并滑动屏幕时,所在的元素如果支持滚动条并且滚动条可用,那么将立即显示滚动条并支持滑动。默认情况下滚动条都是不显示的。这里有两篇文章介绍了如何在Apple设备上给DIV添加滚动条。

http://www.cnblogs.com/weinan/archive/2013/01/05/2832800.html

http://cubiq.org/scrolling-div-on-iphone-ipod-touch

  几个关键的CSS样式:

height: 450px;
overflow: hidden;
-webkit-overflow-scrolling:touch;

   另外,在Apple设备上,如果页面上有动态生成的Canvas对象并且能响应touch事件,当你用手指点击并在Canvas上滑动时它会莫名其妙地闪烁,要解决这个问题只需要给Canvas对象添加下面这个样式即可:

-webkit-tap-highlight-color:rgba(0,0,0,0);

 


本文转自Jaxu博客园博客,原文链接:http://www.cnblogs.com/jaxu/archive/2013/05/17/3083031.html,如需转载请自行联系原作者

相关文章
|
20天前
|
前端开发
页面无法滑动-CSS: touch-action属性
页面无法滑动-CSS: touch-action属性
19 0
|
JavaScript
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
1282 0
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
|
1月前
el-dialog中内容自定义滚动条
el-dialog中内容自定义滚动条
15 0
|
5月前
el-carousel和el-image组合实现swiper左右滑动图片,点击某张图片放大预览的效果
el-carousel和el-image组合实现swiper左右滑动图片,点击某张图片放大预览的效果
Meego touch基本控件介绍—Button篇
前面我们也写过关于meegotouch的两个小程序,相信大家对meegotouch的界面风格都有一定的感观认识,今天写了一个关于button的小程序,一起了解下button的性质。至于button的分类和基本概念,可以点击这里查看。
743 0
|
iOS开发
iOS App Icon启动图尺寸配置适配iPhone XS XR XS Max等
前言 近期在开发新项目, 然后针对 App Icon 与 App LaunchScreen 都需要重新切一套, 需要把相应尺寸大小跟 UI 说明一下, 加上最近刚发布的我 iPhone XS XR XS Max都需要进行统一适配,同时为了让自己以及 UI 同事能更好的去了解 iPhone 不同尺寸特意整理了一下。
3602 0