JavaScript スクロールボックス内で特定の座標の要素を取得する方法

いつもお世話になっております。
早速ですが質問させていただきたいと思います。

とあるシステムでデータベースで管理している情報を、
１件（１レコード）ごとにユーザが閲覧しやすい形にまとめて
ブラウザ上に表示する画面を考えています。

添付させていただきました画像をご参照下さい。
画像のようにスクロールボックス内には、縦方向にレコードの件数分div要素を配置し（薄い緑色）、
div要素１つごとに１レコード分のタイトルやテキストを表示するようにしました。

画面右側の簡単な操作パネルでは、次（Next）ボタンや戻（Back）ボタンをクリックすると、
今現在スクロールボックス内に表示されているdiv要素の前後の要素に
ジャンプするようにしたいと考えています。

そこで、私が考えた実装方法は、

１．予めdivにid属性を数字の連番で設定。
２．添付画像の赤印の座標の要素を、スクロールイベントが発生するたびに取得。
（この赤点座標は、スクロールしても位置が変わりません。）
３．取得したdiv要素のidをを取り出し、backとnextで利用。

という手順です。
（このように実装したいのは、次・戻ボタンにジャンプ機能をつけるだけだと、当然スクロール操作した後にこれらのボタンを押しても、現在閲覧している情報の前後にジャンプできないからです。）

ここで、タイトルの質問に戻るのですが、
スクロールボックス内の特定の座標にある要素を取り出すにはどうすればよいのでしょうか？
また、座標から要素を取り出す以外の方法はありますでしょうか？

因みに、開発ではjQueryを利用しており、その他プラグインも導入可能です。

以上、よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

jQueryのoffsetとscrollTopを使ってうまくできないでしょうか？

現在のスクロール位置の取得
http://black-flag.net/jquery/20100607-1138.html

domのoffsetの取得
http://alphasis.info/2011/10/jquery-api-offset/

domのoffsetをkey:y軸 value:id の連想配列に入れておいて
scroll位置によって、必要なIDを取得して移動する、というようなやり方です。

ざっと作ったので、無駄＆汚い処理もありますが…
サンプルを作ってみたので参考にしてください。

JavaScript
1<html>
2<head>
3	<title>ScrollSample</title>
4	<script type="text/javascript" src="./libs/jquery-2.1.4.min.js" ></script>
5	<script type="text/javascript">
6		var positions = new Array();
7
8		function next() {
9			var current = $(document).scrollTop();
10			for(t in positions) {
11				if(t > current) {
12					$("body").animate({scrollTop : t}, 400, "swing");
13					return;
14				}
15			}
16		}
17		function prev() {
18			var current = $(document).scrollTop();
19			var prev = 0;
20			for(t in positions) {
21				if(t >= current) {
22					$("body").animate({scrollTop : prev}, 400, "swing");
23					return;
24				}
25				prev = t;
26			}
27		}
28
29		function init() {
30			for(var i = 1; i <= 9; i++) {
31				var offset = $("#" + i).offset();
32				positions[offset.top] = i;
33			}
34		}
35
36		$(document).ready(function(){
37			init();
38			$("#prev").click(function() {
39				prev();
40			});
41			$("#next").click(function() {
42				next();
43			});
44		});
45	</script>
46</head>
47<body>
48	<div style="border : 1px solid black;height : 200px;width : 200px" id="1">1</div>
49	<div style="border : 1px solid black;height : 200px;width : 200px" id="2">2</div>
50	<div style="border : 1px solid black;height : 200px;width : 200px" id="3">3</div>
51	<div style="border : 1px solid black;height : 200px;width : 200px" id="4">4</div>
52	<div style="border : 1px solid black;height : 200px;width : 200px" id="5">5</div>
53	<div style="border : 1px solid black;height : 200px;width : 200px" id="6">6</div>
54	<div style="border : 1px solid black;height : 200px;width : 200px" id="7">7</div>
55	<div style="border : 1px solid black;height : 200px;width : 200px" id="8">8</div>
56	<div style="border : 1px solid black;height : 200px;width : 200px" id="9">9</div>
57	<div style="position : fixed; top : 0px; left : 300px" id="buttonArea">
58		<input type="button" value="prev" id="prev"/>
59		<input type="button" value="next" id="next"/>
60	</div>
61</body>
62</html>

投稿2015/07/22 05:08

編集2015/07/22 05:38

MakotoMiyazaki

総合スコア297

ikep

2015/07/22 08:17

クールな解決策を提供していただき、ありがとうございました。作成してみて、凄くシンプルだと感じたのですが、この発想にまで全然至らなかったので、とても助かっちゃいました。 MakotoMiyazakiさんの追記の回答（コード）を見る前に、私も実装してみたのですが、大体同じような形になりました。私は、ボタンを押したときのジャンプをアンカーで作ってましたが、アニメーションで高さを変える方が見た目も分かりやすいですね。是非とも参考にさせていただきたいと思います。ありがとうございました。

行動規範の内容に同意します