2024.01.29 39일차 수업: Java Script 기초(5)

---

Swiper Slide

Custom Pagination

<script>
	var swiper = new Swiper(".mySwiper", {
      	pagination: {
          el: ".swiper-pagination",
          clickable: true,
          renderBullet: function (index, className){ 
              return '<span class="' + className + '">' + (index + 1) + "</span>";
          },
        },
    });
  </script>

pagination을 커스텀해서 사용하려면 renderBullet: function(index, className){}을 사용하면 된다.

커스텀한 페이지네이션 ㅎㅎ

---

Scroll

position: relative, absolute, fixed, sticky

1. CSS 이용하기

position: sticky 사용 시 주의사항

1. left, top, bottom, right 값 중 하나는 꼭 설정되어있어야함
2. 부모 요소에 overflow 속성이 있으면 작동이 안됨(overflow: visible은 예외)
3. explorer에서 동작 안됨
4. 부모 기준으로 위치가 sticky 됨
   (부모 기준으로 부모의 영역 안에 종속되기 때문에 top:50px 값을 주면 브라우저 상단부터 50px에 sticky 되지만 부모영역이 위로 끝까지 스크롤되면 같이 스크롤 되어 없어진다)

2. Java Script 이용하기

scrollTop

스크롤된 값을 받아오는 속성
document: 문서 전체
document.documentElement => head와 body를 둘러싸고 있는 HTML요소를 리턴함

document.documentElement.scrollTop: 페이지의 세로 스크롤 값을 반환

getBoundingClientRect()

대상.getBoundingClientRect() 메서드
: 뷰포트를 기준으로 대상의 left, top, right, bottom 값 반환

대상요소.getBoundingCliendRect().top: 뷰포트 위에서부터 대상요소의 상단까지의 값
대상요소.getBoundingCliendRect().bottom: 뷰포트 아래에서부터 대상요소의 하단까지의 값
대상요소.getBoundingCliendRect().left: 뷰포트 왼쪽에서부터 대상요소의 좌측까지의 값
대상요소.getBoundingCliendRect().right: 뷰포트 오른쪽에서부터 대상요소의 우측까지의 값

window.scrollY

페이지의 세로 스크롤 값 반환
** explorer 브라우저 안됨

window.scrollY: 페이지의 세로 스크롤 값을 반환 (explorer 안됨)

window.pageYOffset

페이지의 세로 스크롤 값 반환
** explorer 브라우저 가능

window.pageYOffset: 페이지의 세로 스크롤 값을 반환 (explorer 가능)

offsetTop, offsetLeft

offsetLeft: 상위 요소의 왼쪽 경계에서 현재 요소의 왼쪽 경계까지의 거리를 픽셀 수로 반환
offsetTop: 상위 요소의 상단 경계에서 현재 요소의 상단 경계까지의 거리를 픽셀 수로 반환

대상요소.offsetTop: css 포지션 정책대로 반환
대상요소.offsetLeft: css 포지션 정책대로 반환

scrollTo

scrollTo(x좌표, y좌표): 특정위치로 스크롤 시키는 함수(절대적 위치)
behavior(어떻게 동작할지): auto(상위 요소에 따라) / instant(그냥 슉 바로) / smooth(부드럽게 움직임)

window.scrollTo(50, 50);
window.scrollTo({
	top: 50,
	left: 50,
	behavior: "smooth"
});

스크립트에서 scrollTo, scrollBy 사용할 때, behavior 옵션 대신 CSS에서 설정가능

<style>
	*{scroll-behavior: smooth;}
</style>

scrollBy

scrollBy(x좌표, y좌표): 현재 위치에서 지정된 만큼 스크롤 시키는 함수(상대적 위치)

window.scrollBy(50, 50);
window.scrollBy({
  top: 500,
  left: 100,
  behavior: "smooth",
});