iframe在ios滑动不顺畅

最新推荐文章于 2022-10-17 11:45:06 发布

原创最新推荐文章于 2022-10-17 11:45:06 发布 · 3.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ios #滑动

Javascript 专栏收录该内容

72 篇文章

订阅专栏

本文介绍了一种优化iframe在移动端滚动体验的方法，通过设置特定CSS属性，实现流畅的滑动效果，解决了iOS等设备上iframe滚动不顺畅的问题。

前提

最近使用了iframe做页面，发现手机端页面的效果非常不好。iOS滑动不是非常的畅通

在使用IFRAME或者其他HTML元素时,你需要使用一个元素(如DIV)来包装他们:

<div class="scroll-wrapper"> 
 <iframe src=""></iframe> 
</div> 

.scroll-wrapper { 
  -webkit-overflow-scrolling: touch; 
  overflow-y: scroll; 
  /* 提示: 请在此处加上需要设置的大小(dimensions)或位置(positioning)信息! */ 
} 
.scroll-wrapper iframe { 
  /* 你自己指定的样式 */ 
}

-webkit-overflow-scrolling: touch; 属性值就是专为浏览器中溢出(overflow)时需要滚动的元素设计的。如果没有指定这个属性,当你想滚动iframe时,实际上会导致外层页面的滚动,通过它你就可以对IFRAME的滚动进行控制! 在原作者的博客站点中,使用了下面的CSS:

.demo-iframe-holder { 
 position: fixed; 
 right: 0; 
 bottom: 0; 
 left: 0; 
 top: 0; 
 -webkit-overflow-scrolling: touch; 
 overflow-y: scroll; 
} 

.demo-iframe-holder iframe { 
 height: 100%; 
 width: 100%; 
}