JavaScript 今見えている領域まで位置を取得したい

ブラウザでスクロールはできるのですが
今見えている領域までの位置を取得したいですが
今一つ方法が分かりません。
方法分かる方教えてください

具体的には①の部分の縦の位置を取得する形です。

|
|
|
|
|
|
|
|
|
|
|
|
------------------------------------------------ ①ここまでブラウザで見えている（スクロールによって動的）
|
|
|
|
|
|
|
|
|
|
|
|
------------------------------------------------　②ここで終了

kei344

2019/01/18 02:33

過去の質問について、「解決済」になっていないものが多数見受けられます。解決したものは「ベストアンサー」を選び、自力で解決した場合はその方法を解答欄に書き、もし万が一解決していないのであれば質問を編集するなどしてみてください。

m.ts10806

2019/01/18 02:35

調べて何も出ない内容には思えませんが、どのように調べて試されたのでしょうか。質問に追記願います。

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

回答3件

座標を求めるならばwindow.pageYOffsetで取れます

投稿2019/01/18 03:26

akihiro3

総合スコア955

jQuery使うのが楽ですかね。

ブラウザのウィンドウサイズを取得する際のjQueryとJavaScriptとCSSメディアクエリの違い - Black Flag
jQueryでスクロール位置を取得・設定する：scrollTop() - UX MILK

こんな感じで画面サイズとスクロール位置が分かるんだから、
なんの要素が画面内に写ってるかというのは逆算で表示出来るでしょ？という感じですね。

本気でやるなら結構計算が面倒ですが工夫してやってみてください。

投稿2019/01/18 03:42

miyabi-sun

総合スコア21158

ブラウザによって若干の偏りがあります

javascript
1<style>
2#position1{background-Color:yellow;position:fixed;right:0px;width:150px;text-align:right;height:1.5em;margin-top:0px;}
3#position2{background-Color:lime;position:fixed;right:0px;width:150px;text-align:right;height:1.5em;margin-top:1.5em;}
4</style>
5<script>
6window.addEventListener('DOMContentLoaded', function(e){
7  window.addEventListener('scroll',function(){
8    document.querySelector('#position1').textContent="scrollTop:"+document.body.scrollTop;
9    document.querySelector('#position2').textContent="pageYOffset:"+window.pageYOffset;
10  });
11});
12</script>
13<body>
14<div id="position1">scrollTop:0</div>
15<div id="position2">pageYOffset:0</div>
16<div>
1700<br>01<br>02<br>03<br>04<br>05<br>06<br>07<br>08<br>09<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>
1820<br>21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>31<br>32<br>33<br>34<br>35<br>36<br>37<br>38<br>39<br>
1940<br>41<br>42<br>43<br>44<br>45<br>46<br>47<br>48<br>49<br>50<br>51<br>52<br>53<br>54<br>55<br>56<br>57<br>58<br>59<br>
2060<br>61<br>62<br>63<br>64<br>65<br>66<br>67<br>68<br>69<br>70<br>71<br>72<br>73<br>74<br>75<br>76<br>77<br>78<br>79<br>
2180<br>81<br>82<br>83<br>84<br>85<br>86<br>87<br>88<br>89<br>90<br>91<br>92<br>93<br>94<br>95<br>96<br>97<br>98<br>99<br>
22</div>
23</body>