利用scroll bar創造互動文本特色 全新說明，更好學

最基礎的文字互動形式

互動文本的形態：捲軸使用

各位同學： 從這個範例我們可以看到， 例用scroll bar的功能可以產生的 基本文本互動效果。 當有許多文字說明， 遠遠超過圖的長度時， 利用這個功能，我們可以讓圖、文的 展現更具互動性。 同時可以讓讀者去選擇， 是否要往下看更多的訊息。 如果你有看到這裡， 這裡我要感謝一位同學， 她問我這個問題， 我才了解之前所做的scroll bar 功能說明，是很不好用的。 這是改良版的說明， 同學可以再試試。

快速上手使用教學影片

影片教學中的CSS：

<style>

.makeoverflow0224 {
/* 啟動 */
overflow: scroll;
/* 隱藏x軸*/
overflow-x: hidden;
}

/* 基本黑體內文 */
.ironcontent01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.01em;
font-weight: normal;
line-height: 1.8;
text-align: left;
letter-spacing: 0.1em;
}
</style>

2012年的教學版本。 click here！

請看教學影片：


語法：

<div style="border:1px solid black;width:280px;height:145px;overflow:scroll;overflow-x:hidden;"> 要被scroll的資料</div>

說明：

1. border:1px  solid black  à  scroll bar框線1像素 實線 黑色
2. width:280px  à 寬度280像素； height:145px  à 高度145像素
3. overflow:scroll  à  scroll bar啟動
4. overflow-x:hidden  à x軸的scroll bar取消（不出現）