解決 iframe 在 ios 上不能滾動的問題

HTML代碼
在使用IFRAME或者其他HTML元素時,你需要使用一個元素(如DIV)來包裝他們:

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

這個DIV將作為支持內部滾動的基礎容器。

 

 

CSS 代碼
要讓IFRAME支持滾動,需要一個常用的CSS屬性和一個很少人知道的CSS屬性(property):

.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%; 
}