不知你會不會常常覺得側邊的資訊落落長, 很想好好整理一下呢??

其實陸陸續續有好格友們問我如何做側邊的捲軸框?? 所以今天趕快抽空寫作業, 不好意思讓有需要的格友們等太久......

我的經驗是.....做捲軸框有2種方法, 一種很簡單只需在自由欄位加上語法即可~~ 另一種則是需要改CSS語法....
LuLu在這邊分享我的經驗.....
為什麼說是經驗呢?? 因為LuLu對CSS語法也是一知半解......所以在這邊只是分享經驗及作法...請大家見諒喔, 由於LuLu功力有限, 所以可能沒有辦法幫大家做troubleshooting喔, sorry~~~~  

LuLu建議如果妳在使用語法上有任何問題, 可以到Pixnet的討論區看看, 那邊有很多熱心的高手喔, 事實上我自己也是常常在那邊尋找答案   好啦~~ 言歸正傳...


方法一, 這是簡單的作法, 建議大家先用此方法.LuLu以前在樂多時是用此一方式, 但是搬過來換版型以後, 則無法再用此方法了.

開一自由欄位, 在你的內容前加上以下語法
 <div style=" OVERFLOW: auto; overflow-x:hidden; WIDTH:160px; HEIGHT:200px">


方法二, 如果你的版型不適合上面的方法...那就一起來編輯CSS語法吧....

首先你需要到後台找到自定欄位的標籤號碼並且針對此一欄位做設定....
找標籤編號的方法, 請到Mila的家看看(點這裡) 

看了Mila的文章後, 你應該知道如何找自定欄位的編號了...現在則可以直接進入後台編輯你的CSS了...
我個人是到"Side" 的區域針對此一自定欄位加上以下卷軸框語法....


#PLUGIN***** .Sidebody {overflow-y:auto;overflow-y:scroll;height:160px;} /* 自訂欄位內容 */

PS: ***** 是你的標籤編號喔!!

上面的語法是我自行簡化的. 其實大家可以自行增減...
以下為語法解說:
#PLUGIN 是自訂欄位部分的標籤
.Sidebody 是內容部分的標籤

overflow-y:auto;這個意思是，當內容超過設定高度時，捲軸會出現
(overflow-y 代表的是y軸，也就是垂直的捲軸)
overflow-x:hidden;這個意思是，不管內容有沒有超過設定高度，捲軸都不會出現
(overflow-x 代表的是x軸，也就是水平的捲軸)

如果要捲軸一直保持在顯示的狀態可以這樣做, 我目前是用scroll的設定.....
overflow-y:auto;改成 overflow-y:scroll;

最後LuLu 謝謝Mila 當初好心的指導我........因為當初我為了加上這個卷軸框....真是不知花了多少寶貴時間阿....



 

文章標籤
全站熱搜
創作者介紹
創作者 LuLu 的頭像
LuLu

☆雙J戀☆

LuLu 發表在 痞客邦 留言(23) 人氣(1,497)