画面スクロール時、ある要素が画面上に表示されているかどうかを判定したい

締切済

質問者：sososososo
質問日時：2009/06/18 13:50
回答数：2件

こんにちわ。

現在、jQuery, WordPressを使用してブログサイトを構築しております。
質問なのですが、スクロールをして特定の記事が画面上に表示された（画面内に少しでも表示された場合も）時にコードを実行したいと考えているのですが、なにか良い方法はありますでしょうか？画像のライブラリでLazy loadという、領域に入った場合に初めて画像をロードするものがありますが、それと同じように具体的には領域に入ったときにテキストをフェードインしたいと考えております。ご教示いただければ幸いです。宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： babu_baboo
回答日時：2009/06/19 16:00

#No.1です。

あんまりひどいこーどなので、はずかしくなりました。
つねにaをしらべるってのもむだなんだけど・・・。
つめが、いつもあまい！とおこられそうですが・・・。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<title>TEST</title>

<style type="text/css">
div { margin:200px 0px; }
.big { font-size:100px;}
</style>
<body onScroll="checker();">
<div class="big">ばぶぅ～！</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div id="a" class="big">赤字に！</div>
<div>abc</div>
<div>abc</div>

<script type="text/javascript">

function checker() {
　if (this.f) return;
　if (this.f = hasInnerView('a')) ColorChanger('a', '#000', '#f00', 100, 20);
}

function hasInnerView (eId) {
　var d = document;
　var db = d.body;
　var y0 = d.documentElement.scrollTop || db.scrollTop;
　var y1 = y0 + d.documentElement.clientHeight || db.clientHeight || db.scrollHeight;
　var t = document.getElementById(eId);
　var t0 = getPosition(t)[1];
　var t1 = t0 + t.offsetHeight;
　return (y0<t0 && t1<y1);
}

function getPosition(node) {
　var x = 0, y = x;
　do x += node.offsetLeft, y += node.offsetTop; while (node = node.offsetParent)
　return [x,y];
}

function ColorChanger (eid, col1, col2, step, time) {

　var s = document.getElementById(eid).style; //if (! s) return;
　var c1 = getEachColor(col1); //if (! c1[0]) return;
　var c2 = getEachColor(col2); //if (! c2[0]) return;
　var c3 = [(c2[0] - c1[0]) / step, (c2[1] - c1[1]) / step, (c2[2] - c1[2]) / step];
　var i = 0;

　return function _() {
　　s.color = 'rgb(' + (c1[0]|0) + ',' + (c1[1]|0) + ',' + (c1[2]|0) + ')';
　　c1[0] += c3[0], c1[1] += c3[1], c1[2] += c3[2];
　　i++ < step && setTimeout (_, time);
　}();
}

function getEachColor(RGB) {
　var v = new Array(3);
　if (RGB != undefined) {
　　if (/^#[0-9A-F]{3}$/i.test(RGB)) {
　　　v = eval(RGB.replace(/^#([0-9A-F])([0-9A-F])([0-9A-F])/i, '[0x$1$1,0x$2$2,0x$3$3]'));
　　} else if (/^#[0-9A-F]{6}$/i.test(RGB)) {
　　　v = eval(RGB.replace(/^#([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})/i, '[0x$1,0x$2,0x$3]'));
　　}
　}
return v;
}

</script>

この回答への補足

ご回答ありがとうございます。

説明が不足していましたが、例えば、ブログコンテンツの投稿記事が画面上に表示されるとフェードイン、画面からはなれるとフェードアウトといった動作をしたいので、特定のidの判定をするのではなく、つねにすべての記事の判定をしたいと考えております。

とはいえ参考になりました。ありがとうございます。

補足日時：2009/06/23 10:42

通報する

- 0
- 件

通報する

No.1

回答者： babu_baboo
回答日時：2009/06/19 14:30

だれもふれないところをみると、これはじらいなのか？

よくわからないけど、もうすでにごみ。
りょういきのしゅとくが、なにがなんだかわからないまま
こぴぺしたので、しらべてね。

ばぶ～。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<title>TEST</title>

<style type="text/css">
div { margin:20em 0em; }
</style>
<body onScroll="p();">
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
<div id="a">見えたらalert!</div>
<div>abc</div>
<div>abc</div>
<div>aabc</div>

<script type="text/javascript">
var d = document;
var db = d.body;
var t = document.getElementById('a');
var t0 = getPosition(t)[1];
var t1 = t0 + t.offsetHeight;

function getPosition(node) {
var x = 0, y = x;
do x += node.offsetLeft, y += node.offsetTop; while (node = node.offsetParent)
return [x,y];
}

function p() {
var y0 = d.documentElement.scrollTop || db.scrollTop;
var y1 = y0 + d.documentElement.clientHeight || db.clientHeight || db.scrollHeight;
if (y0<t0 && t1<y1) alert("でた～");
}
</script>