[JS]省スペースに大量のコンテンツをスクロール表示するスクリプト -News Scroller

Post on:2011年7月21日

実装方法

実装のイメージです。

開始時（図：左）は最初のコンテンツの上の空のスペースをセットし、終了時（図：右）には最後のコンテンツの下にも同様に空のスペースをセットし、ループするようにします。
また、このボックスにはデフォルトのスクロールバーを表示しないようにします。

HTML

スクロールで表示するコンテンツはリスト要素を使います。

<div class="newsScroller" id="newsScroll">
	<ul>
		<li>
			<a class="title" href="#">My Story 1</a>
			<span class="desc">テキスト</span>
			<a class="link" href="#">More...</a>
		</li>
		<li>
			<a class="title" href="#">My Story 2</a>
			<span class="desc">テキスト</span>
			<a class="link" href="#">More...</a>
		</li>
		...
	</ul>
</div>

CSS

スタイルシートの一番のポイントは、ボックスに「overflow-y: scroll;」を指定し、JavaScriptがオフの場合でもコンテンツがスクロールできるようにすることです。

.newsScroller {
	height: 120px; 
	width: 260px; 
	overflow-x: hidden; 
	overflow-y: scroll;
	font: 10px/15px Verdana,Arial,sans-serif;
	color: #333;
	border: 1px solid #999;
}
.newsScroller ul {
	margin: 0;
	padding: 4px;
}
.newsScroller li {
	list-style-type: none;
	margin: 0 0 16px 0;
	padding: 0;
}
.newsScroller a.title {
	display: block;
	font-weight: bold;
	text-transform:uppercase;
	text-decoration: none;
}
.newsScroller a.title, .newsScroller a.title:visited, .newsScroller a.title:hover { 
	color: #F90;
}
.newsScroller a.title:hover
{
	text-decoration: underline; 
}

JavaScript

「jquery.js」を外部ファイルとし、下記のスクリプトを記述します。

$(function() 
{
    $('#newsScroll').each(function() 
    {
        var scroller = $(this);
        var list = scroller.children('ul');

        var listH = list.height();
        var scrollerH = scroller.height();
        list.css({
            marginTop: scrollerH,
            marginBottom: scrollerH
        });
        scroller.css({
            overflow: 'hidden'
        });

        var isOver = false;
        scroller.bind('mouseenter mouseleave', function(e) {
            isOver = (e.type == 'mouseenter');
        });

        var scroll = 0;
        setInterval(function() 
        {
            if (isOver) return;
            scroll++;
            var newTop = scroll % (listH + scrollerH);
            scroller.scrollTop(newTop);
        }, 30);

    });
});