エリア内に収まりきれないテキストや画像を上下スライドで表示する方法



ボックスエリア内に納まりきれてないテキストや画像情報を
「↑」「↓」リンクにマウスオーバーでスライドして表示します。

1.CSSの記述

<style type="text/css">
<!--
#idBoxWrap{
	position:relative;
	width:200px;
	height:200px;
	border:1px solid black;
	overflow:hidden;
	margin:0 auto;
}
#idBox{
	position:absolute;
	width:170px;
	left:0;
	top:0;
}
#idBox p{
	line-height:1.6em;
	margin:5px;
}
.clLink{
	padding:25px 0 0 0;
	text-align:center;
}
.clLink a{
	text-decoration:none;
	border:solid 1px #666666;
	padding:5px;
	color:#666666;
}
.clLink a:hover{
	text-decoration:none;
	border:solid 1px #666666;
	padding:5px;
	color:#ffffff;
	background-color:#666666;
}
-->
</style>

2.JavaScriptの記述例

<script type="text/javascript">
function move(id,spd){
	var obj=document.getElementById(id),max=-obj.offsetHeight+obj.parentNode.offsetHeight,top=parseInt(obj.style.top);
	if ((spd>0&&top<=0)||(spd<0&&top>=max)){
		obj.style.top=top+spd+"px";
	move.to=setTimeout(function(){ move(id,spd); },20);
	} else {
		obj.style.top=(spd>0?0:max)+"px";
	}
}
</script>

3.HTMLの記述例

    <div id="idBoxWrap">
    <div id="idBox">
    
        <p>
        このボックスに入りきらないテキストや画像を<br />
        下にある↑↓リンクで上下にスライドして表示させます。<br />
        <br />
        「BLINDER HIDDEN(ブラインダーヒドゥン)」は、<br />
        WEBエンジニアの隠れたファインプレーを紹介するWEBサイトです。 <br />
        発信情報は、JavaScript、jQuery、Ajax、PHP、Android、java、WordPress、<br />
        Facebook、HTML5、HTML、CSS、CSS3、MySQL、Linux、コマンド、<br />
        SEO、スマートフォン、見えないデザイン、アイデア 等</p>
    
    </div><!--/idBox-->
    </div><!--/idBoxWrap-->
    
    <div class="clLink">
    <a href="#" onMouseover="move('idBox',5)" onMouseout="clearTimeout(move.to)">↑</a>
    
    <a href="#" onMouseover="move('idBox',-5)" onMouseout="clearTimeout(move.to)">↓</a>
    </div>

エリア内に収まりきれないテキストや画像を上下スライドで表示するデモページ

ソース元:Dynamic Drive- Scrollable Content script

過去にも同じ様なことを書いたかもしれませんが、
JavaScirptの利用方法で行き着くところは、
やはりページスペースを如何にして有効活用出来るかになるんでしょうか。