如何修改iframe滾動？

我試圖重拍（http://dollarz.comli.com/testing/index2.html）https://www.seedlipdrinks.com/的設計結構。如何修改iframe滾動？

所以我創建了一個iframe頁面。但是我有一個iframe滾動問題，它與我試圖匹配的設計不相似。

我試過使用scrolling =「no」屬性，但它完全禁用了滾動。

我希望iframe中的內容可以滾動，並且應該隱藏滾動條。有沒有辦法做到這一點？

來源

2016-08-20 Sai

是否要允許滾動和隱藏滾動條？ –

@MahmoodKohansal是的。 – Sai

我發表了一個答案。 –

您鏈接的網站不使用iframe或任何類型的滾動容器。它基本上具有不透明的&固定標題&頁腳+主要內容的頁邊距。這就是讓網站看起來包含在矩形中，同時保留使用窗口滾動條進行滾動的功能。這裏是你如何複製效果：

body { 
    background-color: white; 
} 

header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 50px; 
    background-color: white; 
} 

section { 
    padding: 50px 0; /* So the header/footer doesn't overlap the content */ 
    background-color: #7fff7f; 
    margin: 0 50px; 
} 

footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 50px; 
    background-color: white; 
}

Demo here

來源

2016-08-20 20:49:21 Jacob

這似乎是比使用iframe更好的選擇。 – Sai

但問題是，如果我將標題的高度設置爲100％，它佔用了整個空間並且其他內容（如頁腳）未顯示。以下是它現在的樣子（header -90vh，footer-10vh） - http://dollarz.comli.com/scroll/index3.html。使用iframe - http://dollarz.comli.com/scroll/index2.html。 – Sai

爲什麼要將標題的高度設置爲100％？ – Jacob

您可以使用一個包裝格在你的iframe與overflow: hidden風格，並設置iframe的寬度比格多一點。

HTML：

<div style="overflow: hidden"> 
    <iframe src='http://dollarz.comli.com/testing/index.html'></iframe> 
</div>

CSS：

iframe { 
    width: 103%; 
    height: 100%; 
}

JSFiddle

來源

2016-08-20 20:57:32

酷招。唯一的缺點是我們不能使用窗口滾動來滾動iframe的內容。 http://dollarz.comli.com/scroll/index2.html – Sai

不幸的是你是對的。此外，您通過檢查有用答案的確認將幫助其他用戶像您一樣提出這個問題。 –

如何修改iframe滾動？

回答

相關問題