CSSでボックスのサイズを指定して、overflowプロパティをautoにすると、 ボックス内容がそのサイズを越えたときにスクロールバーが出現します。 この状態は、疑似フレーム(疑似インラインフレーム) や アイフレもどき 等と呼ばれます。
以下のようにボックス内に予め縦のサイズが大きいボックスを入れておくと、 常に縦スクロールバーの出た状態に出来ます。
<div style="width:120px; height:80px; overflow:auto; border:1px solid;">
<div style="padding:2px; height:105%">
疑似フレーム
</div>
</div>
疑似フレーム
※ border:1px solid で分かり易いよう枠を付けてあります。
※ padding:2px; で枠と文字の隙間を２ピクセル取っています。
※ 内側のボックスを height:105%; とすることにより、外側のボックスに対し 縦のサイズが 5% 大きくなります。(ピクセル指定から変更しました)
疑似フレーム＋画像
次は疑似フレームを画像の上に重ねてみましょう。
画像サイズ：横３２０ピクセル、縦２４０ピクセル
疑似フレームの背景用 画像寸法

方法１
img要素を使って画像を表示する方法です。 原理的にはインラインフレームとイメージマップと同じで、 画像と同サイズのコンテナブロックを生成して疑似フレームのボックスを絶対配置して います。イメージマップとの併用も可能です。(後述の方法Ａ)
galleryimg="false" はIE6のイメージツールバーを表示させない属性です。
スクロールバーの色は CSS: スクロールバーの色をデザインする を参考にしてください。 filter:Chroma(color=#fefefe); は指定した色(この例では#fefefe)を透過色に設定する ことによりスクロールバーの一部を透過させています。(WindowsのIEのみ)
<div style="text-align:center;">
 <div style="display:block; position:relative; width:320px; height:240px; margin-left:auto; margin-right:auto;"><!--
--><img src="ame_sw.jpg" alt="" galleryimg="false"><!--
--><div style="position:absolute; left:112px; top:96px; width:192px; height:128px; overflow:auto; scrollbar-face-color:#fefefe; scrollbar-track-color:#fefefe; scrollbar-highlight-color:#fefefe; scrollbar-3dlight-color:#87ceeb; scrollbar-shadow-color:#fefefe; scrollbar-darkshadow-color:#87ceeb; scrollbar-arrow-color:#4169e1; filter:Chroma(color=#fefefe);"><!--
--><div style="padding:2px; text-align:left; position:absolute; left:0px; height:105%; color:black; font-size:9pt;">
<!-- 内容ここから -->
方法１
<!-- 内容ここまで -->
</div></div></div></div>

方法１
width:320px; height:240px; で画像の横と縦のサイズを指定し、 imgタグの src="ame_sw.jpg" で画像を指定します。
left:114px; top:96px; は左からと上からの疑似フレームの位置です。
width:190px; height:128px; は疑似フレームの横と縦のサイズになります。
※ タグの前後にあるコメントアウト<!--と-->は、初心者向けの ホームページスペース等で自動改行によるズレを防ぐためのものです。
※ 中央に寄せる必要のない場合は青色の部分を 省いてください。
※ 一番内側のdivを position:absolute; left:0px; してあるのは heightを指定した ときKonquerorで見ると、はみ出した内容が表示されないための対策です。(バグ？)
※ 方法１は楽天広場ブログでは無効となります。 (positionプロパティがstatic !importantに固定されているため)
方法２
この方法ではdiv要素の背景に画像を貼り付けて表示しています。 CSSの特性によりdiv同士のmarginが相殺されないようpadding:1pxを設けました。
<div style="text-align:center;">
 <div style="width:320px; height:240px; padding:1px; text-align:left; background:center no-repeat url(ame_sw.jpg); margin:0px auto;"><!--
--><div style="margin-left:112px; margin-top:96px; width:192px; height:128px; overflow:auto; scrollbar-face-color:#fefefe; scrollbar-track-color:#fefefe; scrollbar-highlight-color:#fefefe; scrollbar-3dlight-color:#000000; scrollbar-shadow-color:#fefefe; scrollbar-darkshadow-color:#000000; scrollbar-arrow-color:#ff0000; filter:Chroma(color=#fefefe);"><!--
--><div style="padding:2px; height:105%; color:black; font-size:9pt;">
<!-- 内容ここから -->
方法２
<!-- 内容ここまで -->
</div></div></div></div>

方法２
画像の横と縦のサイズ
width:320px; height:240px;

背景画像の指定
background:center no-repeat url(ame_sw.jpg);

疑似フレームの位置、左からと上から
margin-left:112px; margin-top:96px;

疑似フレームの横と縦のサイズ
width:192px; height:128px;
※ margin:0px auto;は、 margin-left:auto; margin-right:auto; と同様で左右に対する中央寄せです。(但し、IE5.5ではバグのため無効)
※ IE5.5は<div style="text-align:center;"> 〜 </div>で中央寄せしています。
疑似フレーム＋イメージマップ
更に次は疑似フレームをイメージマップ(クリッカブルマップ)の定義された画像の上に 配置します。
画像サイズ：横４００ピクセル、縦３００ピクセル
疑似フレームの背景用画像 画像寸法

方法Ａ
これは方法１にイメージマップを合わせたものです。
<div style="text-align:center;">
 <div style="display:block; position:relative; width:400px; height:300px; margin-left:auto; margin-right:auto;"><!--
--><img src="ame_imw.jpg" alt="" usemap="#imgmap" style="border:none;"><!--
--><div style="position:absolute; left:90px; top:140px; width:280px; height:130px; overflow:auto; scrollbar-face-color:#fefefe; scrollbar-track-color:#fefefe; scrollbar-highlight-color:#fefefe; scrollbar-3dlight-color:#ffc0cb; scrollbar-shadow-color:#fefefe; scrollbar-darkshadow-color:#ffc0cb; scrollbar-arrow-color:#ff0000; filter:Chroma(color=#fefefe);"><!--
--><div style="padding:2px; text-align:left; position:absolute; left:0px; height:105%; color:black; font-size:9pt;">
<!-- 内容ここから -->
方法Ａ
<!-- 内容ここまで -->
</div></div></div></div>

<map name="imgmap">
<area href="./" alt="TOP" title="TOP" shape="rect" coords="171,18,200,30">
<area href="html.html" alt="HTML" title="HTML" shape="rect" coords="231,18,268,30">
<area href="notes.html" alt="NOTE" title="NOTE" shape="rect" coords="297,18,334,30">
</map>
方法Ａ
方法１に対して、img要素の属性 galleryimg="false" の代りに usemap="#イメージマップ名" と style="border:none;" を使用し、 イメージマップ(map要素、aera要素)を付加すればＯＫです。
TOP HTML NOTE ※ WindowsユーザーはC-MAPやAreaMaker等のソフトを使用すると容易に イメージマップの作成が出来るようです。
※ 方法Ａは方法１と同様ですので楽天広場ブログでは無効となります。
方法Ｂ
この方法では疑似フレームのマージンに負の値を指定する事により、画像に重ねて います。
<div style="text-align:center;">
 <div style="width:400px; height:300px; text-align:left; margin-left:auto; margin-right:auto;"><!--
--><img src="ame_imw.jpg" alt="" usemap="#imgmap" style="border:none; float:left;"><!--
--><div style="float:left; _display:inline; margin-left:90px; margin-top:-160px; width:280px; height:130px; overflow:auto; scrollbar-face-color:#fefefe; scrollbar-track-color:#fefefe; scrollbar-highlight-color:#fefefe; scrollbar-3dlight-color:#808080; scrollbar-shadow-color:#fefefe; scrollbar-darkshadow-color:#808080; scrollbar-arrow-color:#000000; filter:Chroma(color=#fefefe);"><!--
--><div style="padding:2px; height:105%; color:black; font-size:9pt;">
<!-- 内容ここから -->
方法Ｂ
<!-- 内容ここまで -->
</div></div></div></div>

<map name="imgmap">
<area href="./" alt="TOP" title="TOP" shape="rect" coords="171,18,200,30">
<area href="html.html" alt="HTML" title="HTML" shape="rect" coords="231,18,268,30">
<area href="notes.html" alt="NOTE" title="NOTE" shape="rect" coords="297,18,334,30">
</map>
方法Ｂ
画像の横と縦のサイズ
width:400px; height:300px;

背景の指定
img要素でsrc="ame_sw.jpg"

疑似フレームの位置
margin-left:90px; margin-top:-160px;
margin-leftの値は左からの疑似フレームの位置ですが、margin-topの値は 「上からの疑似フレームの位置」から「画像の高さ」を引いた数値です。 (負の値になります)
上からの位置 - 画像の高さ = margin-topの値
この例では上からの位置を１４０ピクセルにしましたので、
140 - 300 = -160
 と算出出来ます。

疑似フレームの横と縦のサイズ
width:280px; height:130px;
※ 方法Ｂは Opera 9 でスクロールバーが表示されません。 (バージョン8.54では問題なく表示されますのでバグと思われます)
Opera 9〜でもスクロールバーが表示されるよう修正しました。
※ フロートさせているのはOpera 9のスクロールバー対策です。_display:inline; は 正しいCSSではありませんが IE Doubled Float-Margin Bug対策として使用しています。
※ Operaもスクロールバーの色指定に対応のようですが、バグがあるのか色が正しく 表示されない場合があるようです。