【轉】讓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%;   
}   

轉自：http://www.oicqzone.com/pc/2015040321369.html