[window scroll target positon]

# body 스크롤 중앙 도달시 클래스 추가

/**
*    바디 스크롤 중앙(_wH / 2) 클래스 추가 
*    타겟 클래스 : .js-motions
*    모션 클래스 : .m_active
*/
function motionActive() { 
    var _wH = window.innerHeight; //$(window).innerHeight();
    $('.js-motions').each(function() {
        var _t = $(this).offset().top + (_wH / 2); 
        if ($(window).scrollTop() + _wH > _t) {
            $(this).addClass('m_active');
        } else {
            $(this).removeClass('m_active');
        }
    });        
}    
$(window).on('scroll resize', motionActive);

/**
* scroll_motion()
* 바디스크롤:	중앙 못미치면(under), 
		중앙 도달하면(over), 
              	화면 도달해 넘어가면(pass)
* 타겟 클래스 : .js-secton_motion
* 모션 클래스 : .m_active
*/

function scroll_motion() { 
	var _wH = window.innerHeight; 
	var _wS = $(window).scrollTop();
	var _wHS = (_wH + _wS);
	$('.section').each(function () { 			
		var _t = $(this).offset().top + (_wH / 2); 
		var _th = $(this).offset().top + $(this).innerHeight(); 
        console.log(_wHS , _t, _th)
        
		if (_wS > _th) { 
			$(this).removeClass('m_active');    // pass 
		} else if (_wHS > _t) { 
			$(this).addClass('m_active');	   // over
		} else {								
			$(this).removeClass('m_active');    // under
		} 	
	}); 
}
$(window).on('scroll resize', scroll_motion);
$(window).trigger('scroll resize');             // 초기 실행

 

 

# 스크롤 끝도달 이밴트

/*  
* .jscss-scroll-area : 스크롤 컨테이너
* .scroll-type       : 스크롤 영역
*/
$(".jscss-scroll-area .scroll-type").scroll( function() {
  var elem = $(this); {
    if ( (elem[0].scrollHeight - elem.scrollTop() - 1) <= elem.outerHeight()){
      elem.closest(".jscss-scroll-area").addClass("scroll_end");
    }else{
      elem.closest(".jscss-scroll-area").removeClass("scroll_end");
    }
  }
});

 

# 타겟 위치에 따른 X스크롤 중앙이동

  <div class="tab-wrap js-tabmenu">
    <div class="tab_btn-area">
		
      <div class="scroll_system-type">
          <ul class="tabmenu-list">
            <li class="trp-tabitem js-tabBtn">
              <a href="#" class="tab_btn">tab1</a>                
            </li>
            <li class="trp-tabitem js-tabBtn">
              <a href="#" class="tab_btn">tab2</a>           
            </li>
            ....
          </ul>
      </div>
      
    </div>
  </div>

  $('.js-tabmenu a').on('click', function($e) {
    $e.preventDefault();
    var tar_li   = $(this).closest(".trp-tabitem"); 
    var tar_left = tar_li.position().left; 
    var js_wrap  = $(this).closest(".js-tabmenu");
    var scrollX  = tar_left - ( js_wrap.parents(".scroll_system-type").width() / 2 ) + $(this).width() / 2;
	
    /* 텝이 활성화 되있으면, 활성화 재실행 되지 않음. */
    if (tar_li.hasClass('active')){
      return false;
    }else{
      js_wrap.find(".trp-tabitem").removeClass('active');
      tar_li.addClass('active');
      console.log( "aaa", tar_left ,scrollX );
      js_wrap.find(".scroll_system-type").scrollLeft( scrollX );
    }
  });