html滾動條使用，以及頁面有多個div塊，如何讓body頁面不使用滾動條，只在某個div內使用滾動條
阿新 • • 發佈：2018-12-31
滾動條基本知識：
建議比價華麗的頁面使用overflow:scroll這個樣式的滾動條，比較好看。
scrollbar屬性、樣式詳解 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> Scrollbar-Face-Color為滾動條表面顏色設定； Scrollbar-Highlight-Color為滾動條上斜面和左斜面顏色設定； Scrollbar-Shadow-Color為滾動條下斜面和右斜面顏色設定； Scrollbar-3Dlight-Color為滾動條上邊和左邊的邊沿顏色設定； Scrollbar-Arrow-Color為滾動條兩端箭頭顏色設定。 Scrollbar-Track-Color為滾動條底板顏色設定； Scrollbar-Darkshadow為滾動條下邊和右邊邊沿顏色設定。 舉例： <textarea style="width:330px; overflow:scroll; overflow-x:hidden;"></textarea>
2，頁面有多個div塊，如何讓body頁面不使用滾動條，只在某個div內使用滾動條
先說說正常顯示的，顯示滾動條和不顯示滾動條，效果圖如下：
程式碼：
<html> <body> <h3>iframe 中始終顯示滾動條：</h3> <iframe src ="/index.html" width="200" height="200" scrolling="yes"> <p>Your browser does not support iframes.</p> </iframe> <h3>iframe 中從不顯示滾動條：</h3> <iframe src ="/index.html" width="200" height="200" scrolling="no"> <p>Your browser does not support iframes.</p> </iframe> </body> <script> </script> </html>
使用js，不顯示上圖最右邊的總的滾動條
程式碼：
<html> <body> <h3>iframe 中始終顯示滾動條：</h3> <iframe src ="/index.html" width="200" height="200" scrolling="yes"> <p>Your browser does not support iframes.</p> </iframe> <h3>iframe 中從不顯示滾動條：</h3> <iframe src ="/index.html" width="200" height="200" scrolling="no"> <p>Your browser does not support iframes.</p> </iframe> </body> <script> document.documentElement.style.overflowY = 'hidden' </script> </html>
就加了一行程式碼；
使用jquery實現的程式碼：
<html>
<body>
<h3>iframe 中始終顯示滾動條：</h3>
<iframe src ="/index.html" width="200" height="200" scrolling="yes">
<p>Your browser does not support iframes.</p>
</iframe>
<h3>iframe 中從不顯示滾動條：</h3>
<iframe src ="/index.html" width="200" height="200" scrolling="no">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
<script>
$(document.body).css({
"overflow-y":"hidden"
});
</script>
</html>
注：1，不顯示總的滾動條，會導致頁面內容過多事不能顯示超出頁面高度的內容，所有要注意協調。
2，另外可能會出現關閉了整個body的滾動條後，發現div的滾動即使啟動了也沒有顯示，這種情況可能是沒有設定此div的高度或寬度，這是需要設定的。