[TIL] 브라우저 현재 스크롤 값 구하기 + 브라우저 중간에 사진 띄우기

Captainjack·2021년 12월 23일

목록 보기

109/258

일단 margin 싹 걷어내야지 body나 html height:100% 잘 먹음
그래도 원하는 부분 보다 오버레이 부분이 짧다면

$("#block_bg").css({
  "height": scrollHeight + $("#footers").outerHeight() + $("#headers").outerHeight(),
  // "height": "1288px",
})

이런 식으로 헤더랑 푸터 따로 높이를 더해보는 것도 방법.

window.addEventListener('scroll', function(){
  console.log(window.scrollY)
});

*jquery Ver

$(window).scroll(function(){
  console.log($(window).scrollTop());
  // console.log($(window).height());
  
});

*TEST
$(window).scroll(function(){
  console.log("scroll left" + $(window).scrollLeft());
  console.log("scroll top" + ($(window).scrollTop()));
  console.log("window height" + $(window).height());
  console.log("for scrollHeight: " + scrollHeight);
});

let scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);


console.log('스크롤에 의해 가려진 분을 포함한 전체 문서 높이: ' + scrollHeight);


$(window).scroll(function(){

  $(".img_detail_view").css({
    // "top": (($(window).height() - $(".img_detail_view").outerHeight()) / 2 + $(window).scrollTop()) + "px",
    // "left": (($(window).width() - $(".img_detail_view").outerWidth()) / 2 + $(window).scrollLeft()) + "px",
    "top": ($(window).height() / 2 + $(window).scrollTop()) + "px",
    "left": ($(window).width() / 2 + $(window).scrollLeft()) + "px",
  }); 
})

// 이런식으로 센터로 따라오도록 마무리 했다 (like sticky effect)

출처

외부 라이브러리 사용 할 필요없을 듯

https://ko.javascript.info/size-and-scroll-window

https://qjadud22.tistory.com/7

+ 아놔 모바일 오류 발견 ㅋㅋㅋㅋㅋ

갤러리 기존 그리드(1fr 1fr 1fr)형식에서 모바일로 가면

flex colume으로 세로로 출력 되게 했더니

window 창크기보다 모바일 창이 3배나 길어지게 된다.

위와 같이 scrollTop으로 계산하는 것 보다

사진과 함께 오버레이도 같이 이동하는 방식으로 적용해본다.

CSS part

#block_bg {
  display: none;
  cursor: pointer;
  background-color: black; 
  opacity: 0.5; 
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  /* height: 100%; */
  /* height: 165vh; */
  z-index: 900;

  /* 
  ================================
  ** 새롭게 센터로 보내도록 유도  **
  ================================
  */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
}

.img_detail_view {
  cursor: pointer;
  display: none;
  position: absolute; 
  /* position: sticky; */
  z-index: 999;
  max-width: 1000px;
  max-height: 1000px;
  /* width: 100%;
  height: auto; */

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
}

JS part

$("#block_bg").css({
  "height": scrollHeight + $("#footers").outerHeight() + $("#headers").outerHeight(),
})

$(window).scroll(function(){
  $(".img_detail_view").css({
    "top": ($(window).height() / 2 + $(window).scrollTop()) + "px",
    "left": ($(window).width() / 2 + $(window).scrollLeft()) + "px",
  }); 

  $("#block_bg").css({
    "top": ($(window).height() / 2 + $(window).scrollTop()) + "px",
    "left": ($(window).width() / 2 + $(window).scrollLeft()) + "px",
  })
})

+ ㅎㅇ 오류 또 나옴

$("#block_bg").css({
  "top": ($(window).height() / 2 + $(window).scrollTop()) + "px",
  "left": ($(window).width() / 2 + $(window).scrollLeft()) + "px",
})