[Angular] scroll에 따른 함수 실행

Recorder·2021년 3월 26일
2

1. scroll 움질일 때 마다 함수 실행

component.ts

import { HostListener } from '@angular/core';
@HostListener('window:scroll', ['$event'])
_functionname(event){
	//함수 내용
}

html

<div (scroll)="_functionnamel($event)"></div>

2. scroll이 바닦에 닿았을 때, 특정 기능 작동

앞서 만들어 둔 함수 안에, 스크롤의 위치를 인식하는 기능들로 조건문을 만든다.

component.ts

_functionname(event){
	if(
    	  10
    	  +document.documentElement.scrollTop
          +document.documentElement.clientHeight >= document.documentElement.scrollHeight
        ){
        	//함수 내용
    	}
}

scrollTop은 scrollbar의 상단 위치
clientHeight는 scrollbar의 길이
scrollHeight는 전체 scroll 길이를 나타낸다.
즉 (스크롤바 상단위치)+(스크롤바 길이) = (스크롤바 하단위치)로
이것이 전체 scroll길이와 같아지면 스크롤을 가장 아래로 내린 것이다.
10은 여유 공간을 두기 위한 상수이다.

* 스크롤 다운에 따라 추가적인 데이터를 더 불러오고 싶을 땐

component.ts

this.apiService._apiFunctionName().subscribe(
	data =>{
    	  _arrayname1 = _arrayname1.concat(_arrayname2);
        },
	error => {console.log(error)}
);

처럼 concat을 사용한다.
이때 concat을 사용할 _arrayname1은 반드시 초기화되어있어야 한다.
ex)

name : string[];        //(x)
name : string[] = [];	//(o)
profile
기억은 나 대신 컴퓨터가

0개의 댓글