您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > iframe頁面滾動(dòng)條顯示隱藏控制和滾動(dòng)條顏色的方法

iframe頁面滾動(dòng)條顯示隱藏控制和滾動(dòng)條顏色的方法

文章來源：365jz.com 點(diǎn)擊數(shù)：2682 更新時(shí)間：2017-12-06 09:31 參與評(píng)論

<iframe> 標(biāo)簽規(guī)定一個(gè)內(nèi)聯(lián)框架。

一個(gè)內(nèi)聯(lián)框架被用來在當(dāng)前 HTML 文檔中嵌入另一個(gè)文檔。

屬性

New ：HTML5 中的新屬性。

屬性	值	描述
align	left right top middle bottom	HTML5 不支持。HTML 4.01 已廢棄。規(guī)定如何根據(jù)周圍的元素來對(duì)齊 <iframe>。
frameborder	1 0	HTML5 不支持。規(guī)定是否顯示 <iframe> 周圍的邊框。
height	pixels	規(guī)定 <iframe> 的高度。
longdesc	URL	HTML5 不支持。規(guī)定一個(gè)頁面，該頁面包含了有關(guān) <iframe> 的較長描述。
marginheight	pixels	HTML5 不支持。規(guī)定 <iframe> 的頂部和底部的邊距。
marginwidth	pixels	HTML5 不支持。規(guī)定 <iframe> 的左側(cè)和右側(cè)的邊距。
name	name	規(guī)定 <iframe> 的名稱。
sandboxNew	"" allow-forms allow-same-origin allow-scripts allow-top-navigation	對(duì) <iframe> 的內(nèi)容定義一系列額外的限制。
scrolling	yes no auto	HTML5 不支持。規(guī)定是否在 <iframe> 中顯示滾動(dòng)條。
seamlessNew	seamless	規(guī)定 <iframe> 看起來像是父文檔中的一部分。
src	URL	規(guī)定在 <iframe> 中顯示的文檔的 URL。
srcdocNew	HTML_code	規(guī)定頁面中的 HTML 內(nèi)容顯示在 <iframe> 中。
width	pixels	規(guī)定 <iframe> 的寬度。

body{overflow：hidden}，這樣也可以將滾動(dòng)條去掉，而且這也是當(dāng)我們只想去掉某一個(gè)滾動(dòng)條所使用的屬性。

二：去掉右邊的滾動(dòng)條且保留底下的滾動(dòng)條

       如果只想保留底下的滾動(dòng)條，那么可以在嵌入的頁面里設(shè)置 body{overflow-x：auto ; overflow-y：hidden；}

三：去掉底下的滾動(dòng)條且保留右邊的滾動(dòng)條

      在嵌入的頁面里設(shè)置 body{overflow-x：hidden；overflow-y：auto；}



      我們已經(jīng)知道了這兩個(gè)屬性都可以設(shè)置滾動(dòng)條的顯示和隱藏，那么當(dāng)兩個(gè)同時(shí)設(shè)置時(shí)，會(huì)出現(xiàn)哪個(gè)效果呢？

      通過檢測，我發(fā)現(xiàn)當(dāng) scrolling = " auto " 或者 " yes " 時(shí)，如果設(shè)置了 body，那么就會(huì)使用body里的設(shè)置；當(dāng) scrolling = " no " 時(shí)，不管body設(shè)置了什么，都會(huì)使用 scrolling 的設(shè)置，即全部的滾動(dòng)條都被去掉了。

iframe的滾動(dòng)條問題：顯示/隱藏滾動(dòng)條：

XHTML 1.0 Transitional 標(biāo)準(zhǔn)不能顯示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

父頁面：修改為
HTML 4.01 Transitional 標(biāo)準(zhǔn)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

子頁面不要表頭

****** 去掉 iframe 橫向滾動(dòng)條或豎條

1. 在主頁面加 iframe scrolling="yes" 或 "auto"

2. css 文件

body {
     overflow-x : hidden;   去掉橫條
     overflow-y : hidden;   去掉豎條
}

父頁面和子頁面鏈接入 css 文件

3. 去掉子頁面里的
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
(即不要表頭)

4. 兩個(gè)都去掉
<iframe scrolling="no">

**********************************************
資料：
http://fangbubu.javaeye.com/blog/155091

GOOGLE到一些有用的資料：

[DIV+CSS]XHTML下的滾動(dòng)條問題
1.xhtml下滾動(dòng)條的顏色問題？

在原來的html的時(shí)候，我們可以這樣定義整個(gè)頁面的滾動(dòng)條

body{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
scrollbar-highlight-color:#fff; /*- 左二 -*/
scrollbar-face-color:#E4E4E4; /*- 面子 -*/
scrollbar-arrow-color:#666; /*- 箭頭 -*/
scrollbar-shadow-color:#808080; /*- 右二 -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
scrollbar-base-color:#D7DCE0; /*- 基色 -*/
scrollbar-track-color:#;/*- 滑道 -*/
}

但是同樣的代碼，我們應(yīng)用在 xhtml下就不起作用了，我相信好多好朋友也遇到過同樣的問題
那么怎么才能在xhtml下應(yīng)用滾動(dòng)條樣式呢？看下列代碼

html{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
scrollbar-highlight-color:#fff; /*- 左二 -*/
scrollbar-face-color:#E4E4E4; /*- 面子 -*/
scrollbar-arrow-color:#666; /*- 箭頭 -*/
scrollbar-shadow-color:#808080; /*- 右二 -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
scrollbar-base-color:#D7DCE0; /*- 基色 -*/
scrollbar-track-color:#;/*- 滑道 -*/
}

這段代碼和上一段唯一的不同就是在css定義的元素上，一個(gè)是body一個(gè)是html。我們?cè)贉y試一下，把html頁面的
"body"修改成"html"測試一下，發(fā)現(xiàn)依然可以實(shí)現(xiàn)效果。那到底是為什么呢？

在html和xhtml都通過，因?yàn)?就是定義頁面上的任何標(biāo)簽當(dāng)然也包括了“html”這個(gè)標(biāo)簽。

(ps:其實(shí)與其說是html與xhtml的區(qū)別到不如說是有無XHTML 1.0 transitional doctype的區(qū)別，但是如果你把頁面的
XHTML 1.0 transitional doctype去掉的話，那么這個(gè)頁面就沒有doctype，默認(rèn)的顯示方式就是html4.01,不過
你要把XHTML 1.0 transitional doctype修改成HTML 4.01 doctype同樣頁面定義body也不會(huì)有效果的，雖然
這個(gè)頁面的標(biāo)準(zhǔn)是html 4.01)

2.xhtml下frame頁面橫向滾動(dòng)條的問題？

在用ie6瀏覽有框架的xhtml頁面的時(shí)候，默認(rèn)會(huì)水平和垂直滾動(dòng)條會(huì)一起出現(xiàn)，這是ie6的一個(gè)
bug，在firefox上是正常的，出現(xiàn)的原因是其對(duì)XHTML 1.0 transitional doctype的解釋缺陷.

對(duì)于這個(gè)bug一般有3種解決方案，

方法1:
代碼：
html { overflow-y: scroll; }
原理：強(qiáng)制顯示ie的垂直滾動(dòng)條，而忽略水平滾動(dòng)條
優(yōu)點(diǎn)：完全解決了這個(gè)問題, 允許你保持完整的XHTML doctype.
缺點(diǎn)：即使頁面不需要垂直滾動(dòng)條的時(shí)候也會(huì)出現(xiàn)垂直滾動(dòng)條。

方法2:
代碼：
html { overflow-x: hidden; overflow-y: auto; }
原理：隱藏橫向滾動(dòng)，垂直滾動(dòng)根據(jù)內(nèi)容自適應(yīng)
優(yōu)點(diǎn)：在視覺上解決了這個(gè)問題.在不必要的時(shí)候, 未強(qiáng)制垂直滾動(dòng)條出現(xiàn).
缺點(diǎn)：只是隱藏了水平滾動(dòng)條，如果頁面真正需要水平滾動(dòng)條的時(shí)候，
屏幕以外的內(nèi)容會(huì)因?yàn)橛脩魺o法水平滾動(dòng)，而看不到。

方法3:
代碼：
body { margin-right: -15px; margin-bottom: -15px; }
原理：這會(huì)在margin的水平和垂直方向上添加一個(gè)負(fù)值, IE添加了該精確數(shù)值后, 便會(huì)去除對(duì)滾動(dòng)條的需求假象.
優(yōu)點(diǎn)：在視覺上解決了這個(gè)問題.，垂直滾動(dòng)根據(jù)內(nèi)容自適應(yīng)
缺點(diǎn)：由于"人為創(chuàng)建"了15px的外邊距(margin), 所以無法使用該填充過的屏幕區(qū)域.

以上摘自:http://hi.baidu.com/sandmax/blog/item/43fd0e4668dbc6096b63e59f.html

附：強(qiáng)制的滾動(dòng)條:

問題中的"修復(fù)"該bug的技術(shù), 同樣可以用于其它目的. 利用CSS, 你可以有效地在Mozilla Firefox和Internet Explorer中顯示或者隱藏垂直及水平滾動(dòng)條.

強(qiáng)制顯示滾動(dòng)條:

html { overflow: scroll; }

強(qiáng)制隱藏滾動(dòng)條:

html { overflow: hidden; }

隱藏IE的水平滾動(dòng)條:

html { overflow-x: hidden; }

隱藏IE的垂直滾動(dòng)條:

html { overflow-y: hidden; }

強(qiáng)制顯示IE的水平滾動(dòng)條:

html { overflow-x: scroll; }

強(qiáng)制顯示IE的垂直滾動(dòng)條:

html { overflow-y: scroll; }

強(qiáng)制顯示Mozilla的水平滾動(dòng)條:

html { overflow:-moz-scrollbars-horizontal; }

注意: 僅僅強(qiáng)制顯示水平滾動(dòng)條. 也就是說, 即使需要顯示垂直滾動(dòng)條時(shí), 垂直滾動(dòng)條也不會(huì)出現(xiàn).

強(qiáng)制顯示Mozilla的垂直滾動(dòng)條:

html { overflow:-moz-scrollbars-vertical; }

注意: 僅僅強(qiáng)制顯示垂直滾動(dòng)條. 也就是說, 即使需要顯示水平滾動(dòng)條時(shí), 水平滾動(dòng)條也不會(huì)出現(xiàn).

谷歌瀏覽器修改滾動(dòng)條樣式：
在iframe外層包一層div，添加如下樣式：
style="-webkit-overflow-scrolling:touch;overflow:auto;"
代碼如下：
<div style="width:100%;-webkit-overflow-scrolling:touch;overflow:auto;"><iframe name="main" id="main" src="../demo.html" width="100%" height="100%" frameborder="0" vspace="0" scrolling="yes" ></iframe></div>

谷歌修改滾動(dòng)條樣式
html {
                        overflow: auto;
                        min-width: 0px;
                }
                body {
                        position: absolute;
                        top: 1px;
                        /*left: 10%;*/
                        bottom: 1px;
                        /*right: 20px;*/
                        padding: 1px;
                        overflow-y: scroll;
                        overflow-x: hidden;
                        width: 95%;
                }

                /* Let's get this party started */
                ::-webkit-scrollbar {
                        width: 12px;
                }

                /* Track */
                ::-webkit-scrollbar-track {
                        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
                        -webkit-border-radius: 10px;
                        border-radius: 10px;
                }

                /* Handle */
                ::-webkit-scrollbar-thumb {
                        -webkit-border-radius: 10px;
                        border-radius: 10px;
                        background: rgba(144,24,53,0.7);
                        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
                }
                ::-webkit-scrollbar-thumb:window-inactive {
                        background: rgba(255,0,0,0.4);
                }