生活の跡

個人的な備忘録

画面幅より広い親要素内で、画面に表示されている両端の子要素を取得する

概要

年表のWebアプリを作っています。すべての期間が画面幅に収まらないため、横スクロールで一部の期間のみ表示させています。

画面に表示されている両端の年を取得する必要が出てきたので、jQueryでの実装方法を調べました。

完成イメージ

現在表示されている両端の子要素を取得し、値を画面上部のテキストに表示しています。 f:id:ishii-akihiro:20191226103915g:plain

実装方法

HTMLのbody部分

親要素であるwrapperの中に、子要素yearがたくさんある状態です。

<p>現在の表示範囲: <span id="on-display"></span></p>
<div class="wrapper">
  <div class="year">1900</div>
  <div class="year">1901</div>
              :
            (省略)
              :
  <div class="year">1999</div>
  <div class="year">2000</div>
</div>

javaScript(jQuery)

親要素wrapper内でスクロールを検知したら処理を呼び出します。処理の流れは次の通りです。

  1. $('.year')で子要素群を取得する
  2. filterメソッドで、画面左端から右側にある(offset().left >= 0に該当する)子要素群に絞り込む
  3. firstメソッドで、取得した子要素群から先頭の要素を取得する

画面右端の要素も同じ流れです。

$(function(){
  // 親要素内でスクロールを検知したとき
  $('.wrapper').scroll(function(){
    // 画面左端の要素の値を取得
    var year_left = $('.year').filter(function() {
      return $(this).offset().left >= 0;
    }).first().text();
    
    // 画面右端の要素の値を取得
    var year_right = $('.year').filter(function() {
      return $(this).offset().left <= $('.wrapper').width();
    }).last().text();

    // 取得した値を表示
    $('#on-display').text(year_left + '〜' + year_right);
  });
});

CSS

本記事の趣旨とは関係ありませんが、CSSも補足として記載します。writing-mode: vertical-lr; }で縦書きに、display: flexで横並びにしています。画面幅を超えるので、overflow: scroll;も設定しています。

.wrapper {
  height: 100px;
  border: 3px solid #000;  
  overflow: scroll;
  display: flex;
}
.year {
  border: 1px solid #ddd;
  padding: 5px 10px;
  writing-mode: vertical-lr;
}