甜蜜媽咪痞世界

左右自訂欄位要在CSS自訂式樣中設上捲軸設定有兩種方式

(但要在自訂欄位加捲軸建議使用面板欄位加框設定)

面板欄位加寬方法請參考 →

●第一種方法

1.先到版型設定處將(自訂欄位)欄位名稱全部移到左邊其他預設欄位都設在右邊

2.將下方語法貼到CSS自訂式樣表最底處

語法範例如下

語法解說:

OVERFLOW:auto; →內容超出區塊自動由瀏覽器決定

HEIGHT:350px;  →滑軌高度

滑軌各部顏色↓

scrollbar-face-color:#333333;
scrollbar-track-color:#333333;
scrollbar-arrow-color:#ff0000;
scrollbar-3dlight-color:#000000;
scrollbar-highlight-color:#333333;
scrollbar-shadow-color:#333333;
scrollbar-darkshadow-color:#000000;

捲軸語法部位說明
SCROLLBAR-FACE-COLOR: 色碼; /*設定軸面顏色*/

SCROLLBAR-HIGHLIGHT-COLOR:色碼; /*設定軸面三角左邊顏色*/

SCROLLBAR-SHADOW-COLOR: 色碼; /*設定軸面三角右邊顏色*/

SCROLLBAR-3DLIGHT-COLOR: 色碼; /*設定左立體邊顏色*/

SCROLLBAR-DARKSHADOW-COLOR: 色碼; /*設定右立體面顏色*/

SCROLLBAR-ARROW-COLOR: 色碼; /*設定箭頭的顏色*/

SCROLLBAR-TRACK-COLOR: 色碼; /*設定軸軌的顏色*/



卷軸OVERFLOW 設定:

OVERFLOW 設定捲軸出現的設定值，以下列出較常用的語法

OVERFLOW : Hidden; 　 不出現捲軸

OVERFLOW : Auto; 　瀏覽器判斷區塊是否超過設定的寬高，而出現捲軸

OVERFLOW : Scroll; 　強迫出現捲軸，無論是否超過預設的寬高


Hidden及Scroll也可以各別設定直捲軸Y 或 橫捲軸X

OVERFLOW-x : Hidden;　定義X 水平捲軸隱藏不出現

OVERFLOW-y : Hidden;　定義Y 垂直捲軸隱藏不出現

OVERFLOW-x : Scroll; 　強迫X 水平捲軸出現


卷軸名稱部位對照表

語法放置自訂式樣請參考圖解:→

●第二種方法:

此方法一樣建議使用在版面攔位加寬後

這方法可以任意將想要加捲軸的或是不加捲軸的自己設定~

這方式不限自訂欄位是方左側或是右側一樣都可以任意加上

1. 將下方語法貼在CSS自訂式樣表中

語法中 fi4區塊名稱標籤

語法中捲軸顏色及其他設定與上方註解一樣

2. 在每一個要加捲軸的自訂欄位加內容時須在內容開頭處打上

加上<div id="fi4"> 在最後再加上</div>

如下範例↓

<div id="fi4"> 這裡再貼欄位中文字或是語法</div>

自訂欄位貼貼語法請參考圖解:→