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

請收藏本文,以備查詢或使用.記得有這個CSS屬性是設置在包裝元素上,而不是設置到滾動元素自身上面的!