css實現隱藏滾動條的代碼案例

來源：懂視網責編：小采時間：2020-11-27 18:50:00

css實現隱藏滾動條的代碼案例

css實現隱藏滾動條的代碼案例:overflow 屬性規定當內容溢出元素框時發生的事情①visible 默認值。內容不會被修剪，會呈現在元素框之外。②hidden 內容會被修剪，并且其余內容是不可見的。③scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。④auto 如果內容被修剪，

推薦度：

點擊下載本文 文檔為doc格式

導讀css實現隱藏滾動條的代碼案例:overflow 屬性規定當內容溢出元素框時發生的事情①visible 默認值。內容不會被修剪，會呈現在元素框之外。②hidden 內容會被修剪，并且其余內容是不可見的。③scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。④auto 如果內容被修剪，

overflow 屬性規定當內容溢出元素框時發生的事情

①visible 默認值。內容不會被修剪，會呈現在元素框之外。
②hidden 內容會被修剪，并且其余內容是不可見的。
③scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
④auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
⑤inherit 規定應該從父元素繼承 overflow 屬性的值。

例子一：table做容器且【隱藏】滾動條

注意：{①table的dispaly設置為block，否則不會出現滾動條}

要先把table放到一個p中，p的長度和寬度要固定

如果只想垂直方向有滾動，可以設置外面p屬性overflow-x: hidden;

例子：

<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>滾動條</title>
 <style type="text/css">
 *{margin: 0;padding: 0}
 .area{width: 300px;height: 600px;background-color: #BFEFFF;
 overflow-x: hidden;position: relative}
 .area table{display: block;width: 320px;height: 600px;
 background-color: #00D685;overflow-y: auto;}
 .area table tr td{height: 200px;width: 300px}
 </style>
</head>
<body>
<p class="area">
 <table>
 <tr><td>1</td></tr>
 <tr><td>2</td></tr>
 <tr><td>3</td></tr>
 <tr><td>4</td></tr>
 <tr><td>5</td></tr>
 <tr><td>6</td></tr>
 </table>
</p>
</body>
</html>

這里注意修改table屬性

例子二：

ul作容器，隱藏滾動條

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>滾動條</title>
 <style type="text/css">
 *{margin: 0;padding: 0}
 .area{width: 300px;height: 600px;background-color: #BFEFFF;
 overflow-x: hidden;
 position: relative}
 .area ul{height: 100%;width: 320px;background-color: #00D685;list-style: none;
 overflow-x: hidden;overflow-y: auto}
 .area ul li{height: 200px;width: 100%;background-color: #cccccc}
 </style>
</head>
<body>
<p class="area">
 <ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 </ul>
</p>
</body>
</html>

原理：在容器外面再嵌套一層 overflow:hidden 內部內容再限制尺寸和外部嵌套層一樣，就變相隱藏了。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

css實現隱藏滾動條的代碼案例

推薦度：

點擊下載本文 文檔為doc格式

標簽：實現代碼的代碼

熱門焦點

css實現隱藏滾動條的代碼案例

css實現隱藏滾動條的代碼案例

css實現隱藏滾動條的代碼案例

最新推薦

猜你喜歡

熱門推薦