자바스크립트 기초 (5)

코딩애플(https://codingapple.com/course/javascript-jquery-ui/)에서 강의를 듣고 공부 목적으로 적은 정리글입니다.

캐러셀 슬라이드 만들기

슬라이드를 캐러셀이라고 부름

※ width: 100vw;
브라우저 폭이 꽉 차는 기준으로 100vw, 브라우저 크기의 3배를 하고싶다면 300vw

1. 먼저 html로 구조를 만들고 CSS도 설정하고 왼쪽으로 배치함
   [HTML]

  <div style="overflow: hidden;"> <!--overflow는 아래 나열한 이미지 때문에 적용함-->
    <div class="slide-container">
      <div class="slide-box"><img src="car1.png"></div>
      <div class="slide-box"><img src="car2.png"></div>
      <div class="slide-box"><img src="car3.png"></div>
    </div>
  </div>

<button class="slide-1">1</button>
<button class="slide-2">2</button>
<button class="slide-3">3</button>

[CSS]

.slide-container {
      width: 300vw;
      transition:  all 1s;
   
    }

    .slide-box {
      width: 100vw;
      float: left;
    }

    .slide-box img {
      width: 100%;
    }

2. 이동시키기
   1) margin-left : -100wh, -200wh 해서 당기는 방법
   2) transform: translateX(-100vw) : margin-left 보다 성능이 좋음

//1번 버튼 클릭하면 슬라이드가 원래대로 돌아오기 
document.querySelector('.slide-1').addEventListener('click', function(){ 
  document.querySelector('.slide-container').style.transform ='translateX(0vw)'
})
//2번과 3번 버튼 각각 클릭하면 슬라이드 되게하기
document.querySelector('.slide-2').addEventListener('click', function(){
  document.querySelector('.slide-container').style.transform ='translateX(-100vw)'
})
document.querySelector('.slide-3').addEventListener('click', function(){
  document.querySelector('.slide-container').style.transform ='translateX(-200vw)'
})

3. 다음 버튼

var 지금사진 = 1;
document.querySelector('.next').addEventListener('click',function(){
if(지금사진 == 1){
  document.querySelector('.slide-container').style.transform ='translateX(-100vw)'
  지금사진++; //지금사진 +=1 해도 됨
} else if(지금사진 == 2){
  document.querySelector('.slide-container').style.transform ='translateX(-200vw)'
  지금사진++;
}
else{
  document.querySelector('.slide-container').style.transform ='translateX(0vw)'
}

})

4. 이전 버튼

document.querySelector('.before').addEventListener('click', function(){
  if(지금사진 == 3){ //현재 1이면 3이 
  document.querySelector('.slide-container').style.transform ='translateX(-100vw)'
  지금사진 = 2;
  }
  else if(지금사진 == 2){
    document.querySelector('.slide-container').style.transform ='translateX(0vw)'
    지금사진 = 1;
  }
  else if(지금사진 == 1){
    document.querySelector('.slide-container').style.transform ='translateX(0vw)'
  }
})

스크롤 이벤트

window.addEventListener('scroll',function(){
  //코드입력
})

☞ window는 웹페이지를 의미함

스크롤 관련 함수

window.addEventListener('scroll',function(){
  console.log(window.scrollY) //유저가 얼마나 스크롤(px 단위)을 내렸는지 알 수 있음
  window.scrollTo(x,y) // 강제로 스크롤 하기
  window.scrollBy(x,y) // 현재 위치부터 강제로 스크롤, 버튼 누르면 100px 내려주세요 가능 
});

☞ 가로를 원한다면 scrollX, 호환성을 위해 쓰고싶다면 window.pasgeYOffset

부트스트랩으로 인해 스크롤이 스무스한경우 해제 원하면

css에 다음 코드를 입력

:root { scroll-behavior : auto } 

overflow-y:scroll

<div class="lorem" style="width: 500px; height: 100px; overflow-y: scroll">

overflow-y: scroll : 내용이 길어지면 스크롤이 생기게함

스크롤 내리면 폰트가 작아졌다가 위로 올리면 다시 원상태로 돌아오게 하기

window.addEventListener('scroll',function(){
  var 폰트사이즈 = window.window.scrollY 
                // || window.pageXOffset 
                // || document.documentElement.scrollTop 
                // || document.body.scrollTop;
  if(폰트사이즈 > 500){
    document.querySelector('.navbar-brand').style.fontSize = '15px'
  }
  else if(폰트사이즈 <= 500){
    document.querySelector('.navbar-brand').style.fontSize = '30px'
  }
});

모든글을 다 읽으면 다 읽었다고 모달창 띄우기

<div class="lorem" style="width: 500px; height: 100px; overflow-y: scroll">
긴 글~
</div> 

<script>
//div의 스크롤바 내린 양 + 눈에보이는높이 == div의 실제 높이 맞으면 alert 띄우기 
document.querySelector('.lorem').addEventListener('scroll',function(){
  var 스크롤양 = document.querySelector('.lorem').scrollTop
  var 눈에보이는높이 =  document.querySelector('.lorem').clientHeight
  var 박스실제높이 = document.querySelector('.lorem').scrollHeight
  if(스크롤양 + 눈에보이는높이 >= 박스실제높이){
    alert('다읽었네요!')
  }
})
</script>

☞ div박스의 스크롤바를 내린 높이는 셀렉터.scrollTop
☞ div박스의 눈에 보이는 높이는 셀렉터.clientHeight
☞ div박스의 실제높이는 셀렉터.scrollHeight

만약에 HTML 페이지 전체 일 경우에는

  var 스크롤양 = document.querySelector('html').scrollTop //웹페이지 스크롤양 , window.scrollY로 대체 가능
  var 눈에보이는높이 =  document.querySelector('html').clientHeight // 웹페이지 눈에 보이는 높이
  var 박스실제높이 = document.querySelector('html').scrollHeight //웹페이지 실제 높이 

☞ document.querySelector('html') 대신 document.documentElement로 대체 가능
☞ scrollHeight 구하는 코드는 페이지 로드가 완료되고나서 실행해야 정확해서 body 태그 끝나기 전에 적는게 좋음

오늘의 한줄평 : 캐러셀이 왜 안되나 했더니 아주 기본적인 실수를 했었다..다신 실수 하지 말아야지. 스크롤도 재미있었다.

출처 : 코딩애플 https://codingapple.com/course/javascript-jquery-ui