https://idea-hack.com/blog/61212/
【WordPress対応】スクロール位置でJSの実行をコントロールする3つの即席コード

【WordPress対応】スクロール位置でJSの実行をコントロールする3つの即席コード

スクロール位置によって特定のJSを実行する際に便利な3つの即席コードを紹介しています。

WEBページの読み込み時ではなく、読み込んで、その要素がスクロールによって現れた時にJavascriptコードを実行したり、画面に要素がある時にだけJavascriptコードを実行したい場面があります。

その時にコードを自作するのが面倒なので、ここにまとめておきます。

KAZUKI
ただし、JQueryが動いていることが前提です。

スクロールした時に1度だけJavascriptを実行する

まずは、1度だけJavascriptを実行する時のスクロール判定関数を書きます。

JQuery
  function isScrolledIntoViewOnce(elem) {
      var docViewTop = jQuery(window).scrollTop();
      var docViewBottom = docViewTop + jQuery(window).height();
    
      var elemTop = jQuery(elem).offset().top;
      var elemBottom = elemTop + jQuery(elem).height();

      if( elemBottom < docViewBottom ) {
        if( elemTop > docViewTop ) {
					return true;
      }
    }
};

この関数を使った次のデモをご覧ください。対象の要素が画面に現れると背景色が変わる様にしています。

HTML
<div class="sample-1">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box-2"></div>
</div>
CSS
.box {
	height: 200px;
	background: #ccc;
	margin-bottom: 20px;
}

.box-2 {
	height: 200px;
	background: #ccc;
}

.active {
	background: #545454 !important;
}
Javascript
  function isScrolledIntoViewOnce(elem) {
      var docViewTop = jQuery(window).scrollTop();
      var docViewBottom = docViewTop + jQuery(window).height();
    
      var elemTop = jQuery(elem).offset().top;
      var elemBottom = elemTop + jQuery(elem).height();

      if( elemBottom < docViewBottom ) {
        if( elemTop > docViewTop ) {
					return true;
      }
    }
};
jQuery( function($) { 
  $( window ).scroll( function () {
		if ( isScrolledIntoViewOnce('.sample-1 .box-2')) {
	 		$('.sample-1 .box-2').addClass( 'active' );
		}
	});
});
Output

対象のhtmlタグの上に再度スクロールした時に元に戻したい

一度スクロールしてJavascriptが実行された後、元に戻したいときは下記の様に、スクロール位置が再度上になった時に、打ち消すコードを書いてあげればよです。この記事の例では、removeClassで打ち消しています。

一度下まで、スクロールしたのち、再び上にスクロールすると、色が元に戻るのが分かるかと思います。

HTML
<div class="sample-2">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box-2"></div>
</div>
CSS
.box {
	height: 200px;
	background: #ccc;
	margin-bottom: 20px;
}

.box-2 {
	height: 200px;
	background: #ccc;
}

.active {
	background: #545454 !important;
}
Javascript
  function isScrolledIntoViewRepeat(elem) {
      var docViewTop = jQuery(window).scrollTop();
      var docViewBottom = docViewTop + jQuery(window).height();
    
      var elemTop = jQuery(elem).offset().top;
      var elemBottom = elemTop + jQuery(elem).height();

      if( elemBottom < docViewBottom ) {
          return true;
  }};
jQuery( function($) { 
  $( window ).scroll( function () {
		if ( isScrolledIntoViewRepeat('.sample-2 .box-2')) {
	 		$('.sample-2 .box-2').addClass( 'active' );
		} else {
                   $('.sample-2 .box-2').removeClass( 'active' );
                }
	});
});
Output

対象のhtmlタグがスクロールで画面に表示されている時だけ実行したい

画面に映っている時だけ javascript を適用したいときは下記の様にするのが良いでしょう。一度下まで、スクロールしたのち、再びスクロールすると、対象要素が表示されている時だけ、色が変わっているのがわかると思います。

HTML
<div class="sample-3">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box-2"></div>
</div>
CSS
.box {
	height: 200px;
	background: #ccc;
	margin-bottom: 20px;
}

.box-3 {
	height: 200px;
	background: #ccc;
}

.active {
	background: #545454 !important;
}
Javascript
  function isScrolledIntoViewScreen(elem) {
      var docViewTop = jQuery(window).scrollTop();
      var docViewBottom = docViewTop + jQuery(window).height();
    
      var elemTop = jQuery(elem).offset().top;
      var elemBottom = elemTop + jQuery(elem).height();


      if( elemBottom < docViewBottom ) {
        if( elemTop > docViewTop ) {
					return true;
      }
    }
};
jQuery( function($) { 
  $( window ).scroll( function () {
		if ( isScrolledIntoViewScreen('.sample-3 .box-2')) {
	 		$('.sample-3 .box-2').addClass( 'active' );
		} else {
                   $('.sample-3 .box-2').removeClass( 'active' );
                }
	});
});
Output