自動縦スクロール
投稿日: 2012-10-05 /
カテゴリー:job
お知らせ的なものを、狭いエリア内で縦に自動スクロールさせたいんです、と言われたのでちょっと調べてみました。こんな感じでできそうです。
div#ticker {
width: 800px;
height: 50px;
overflow-y: scroll;
padding: 2px;
padding-left: 8px;
}
div#ticker pre {
padding: 0;
margin: 0;
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 */
word-wrap: break-word; /* IE 5.5+ */
}
<div id="ticker">
<pre>なにかしらの
コメントを適当に
セットします。</pre>
</div>
以下を適当な名前で保存して、JavaScriptとして組み込みます。
$(window).load(function () {
var area = $("#ticker");
if (area) {
scrollComment(area);
}
});
function scrollComment(area) {
var areaH = area.height();
var speed = 40;
function animator(currentItem) {
var d = currentItem.height();
if (d > areaH) {
var duration = d * speed;
currentItem.animate({marginTop: -1 * d}, duration, "linear", function() {
currentItem.css("marginTop", areaH);
animator(currentItem);
});
}
};
var cmt = area.children(0);
if (cmt) {
animator(cmt);
area.mouseenter(function() {
cmt.stop();
});
area.mouseleave(function() {
animator(cmt);
});
}
};
こちらを参考にさせていただきました。
（IE6で動かなかったので調整した以外はほとんどそのまんまです。）
http://kachibito.net/snippets/vertical-news-ticker
http://html-coding.co.jp/knowhow/tips/000043/