首頁 > 其他

去掉iframe的水平捲軸而保留垂直捲軸

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

如果untitled3.html頁中文字超過一屏的話，就會出現了垂直捲軸，在IE7.FF下都是不出現水平捲軸，但在IE6下會出現．
在網上找了兩種方法如下：
在<boby>裡加入scroll="no"，可隱藏捲軸；
在<boby>裡加入style="overflow-x:hidden"，可隱藏水平捲軸；加入style="overflow-y:hidden"，可隱藏垂直捲軸。
但試了都不行，最後終於找到了正確的方法：
在被包含頁面裡加入
<style>
html { overflow-x:hidden; }
</style>
有一段解釋是這樣說的：body{ overflow-x:hidden; }在標準 DTD 下是不可以的．

（某些樣式需ie5.5+才能支援）：

1．overflow內容溢出時的設定（設定被設定對象是否顯示捲軸）
overflow-x水平方向內容溢出時的設定
overflow-y垂直方向內容溢出時的設定
以上三個屬性設定的值為visible(預設值)、scroll、hidden、auto。

2．scrollbar-3d-light-color立體捲軸亮邊的顏色（設定捲軸的顏色）
scrollbar-arrow-color上下按鈕上三角箭頭的顏色
scrollbar-base-color捲軸的基本顏色
scrollbar-dark-shadow-color立體捲軸強陰影的顏色
scrollbar-face-color立體捲軸凸出部分的顏色
scrollbar-highlight-color捲軸空白部分的顏色
scrollbar-shadow-color立體捲軸陰影的顏色

我們通過幾個執行個體來講解上述的樣式屬性：
1.讓瀏覽器視窗永遠都不出現捲軸
沒有水平捲軸
<body style="overflow-x:hidden">
沒有垂直捲軸
<body style="overflow-y:hidden">
沒有捲軸
<body style="overflow-x:hidden;overflow-y:hidden">或<body
style="overflow:hidden">

2.設定多行文字框的捲軸

沒有水平捲軸
<textarea style="overflow-x:hidden"></textarea>

沒有垂直捲軸
<textarea style="overflow-y:hidden"></textarea>

沒有捲軸
<textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>
或<textarea style="overflow:hidden"></textarea>

3.設定視窗捲軸的顏色
設定視窗捲軸的顏色為紅色<body style="scrollbar-base-color:red">
scrollbar-base-color設定的是基本色，一般情況下只需要設定這一個屬性就可以達到改變捲軸顏色的目的。
加上一點特別的效果：
<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">

4.在樣式表檔案中定義好一個類，調用樣式表。
<style>
.coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}
</style>
這樣調用：
<textarea class="coolscrollbar"></textarea>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More