Vue/Nuxt Element 높이 값 받아오기

번외?

let scrollTop = window.scrollY||document.documentElement.scrollTop ;

ie는 window.scrollY없으므로 document.documentElement.scrollTop 로  쓸수있게

자바스크립트 현재의 스크롤바 위치 가져오는 방법

 

 

 

출처

[Vue.js/Nuxt.js] Element 높이 값 받아오기

노란색 동그라미 부분이 내용에 따라 높이가 변화한다

그렇기 때문에
노란색 동그라미 부분이 변함에 따라 빨간 박스도 높이값이 변화

알고 싶은 것:

 

보라색 상자 높이 값!

빨간색 상자 높이 값을 구한 다음, 파란 부분 차이를 더해서 보라색 박스 높이 값을 구하려 한다

이를 위해서 빨간색 박스의 높이 값을 받아와야 한다

vue 에서 DOM 에 접근하기 위해서는 $refs 를 사용할 수 있다

<div class="wrap">
    
   // 보라색 상자
    <section class="purple">
        <div class="background_pic"></div>
    </section>


    // 빨간 상자
    <section class="red" ref="red_height">
      // 프로필 사진
      <div class="carrot"></div>
     // 사용자 정보
      <div class="info"></div>

    </section>

</div>

와 같은 구조라고 가정

• 보라색 박스 높이 구하기 ()

export default {

    data() {
      return {
        red_box_height:'',
        purple_height:'',
      }
    }
}

methods: {
      getInfoHeight () {
        let val  = this.$refs.red_height.scrollHeight;
        // red_height 의 높이값 받아온다
        this.red_box_height = `${val}px`;
        // red_box_height 에서 
        // "background img 높이 - 프로필 사진 차지한 값" 더한다 
        // (= background img 높이 - 초록색 부분 높이 = 파란 부분 높이) 
        // 10px 라고 가정
        // 더하고 밑에 넉넉히 10px 마진 줌
        this.purple_height = `${this.red_box_height} + 10px + 30px`

      },

               
// dom 에 접근하기 위해 mounted 에 method 사용
        
mounted(){
	this.getInfoHeight()
},
        

• template 부분에 binding 해주기

<div class="wrap">
    
   // 보라색 상자
    <section class="purple" :style="`height:calc(${purple_height}`">
        <div class="background_pic"></div>
    </section>


    // 빨간 상자
    <section class="red" ref="red_height">
      // 프로필 사진
      <div class="carrot"></div>
     // 사용자 정보
      <div class="info"></div>

    </section>

</div>

 

 

Javascript 나 jQuery 에서 지금도 높이, 너비 구할 때 아직도 헷갈릴 때가 있다.

그래서 다음과 같이 정리해 본다.

 

JavaScript에서 요소의 크기 구하기

 

1 2 3

var element = document.getElementById('content'); var h = element.clientHeight; var w = element.clientWidth;

cs

 

높이

- clientHeight : padding을 포함한 높이

- scrollHeight : padding을 포함한 화면 상에 표시되지 않은 콘텐츠를 포함한 높이

- offsetHeight : border, padding, 스크롤 바를 포함한 높이

 

너비

- clientWidth : padding을 포함한 폭

- scrollWidth : padding을 포함한 화면 상에 표시되지 않은 콘텐츠를 포함한 폭

- offsetWidth : border, padding, 스크롤 바를 포함한 폭

 

 

윈도우 사이즈

window.innerWidth :  스크롤 바를 포함하지 않는 창 너비

window.innerHeight : 스크롤 바를 포함하지 않은 창 높이

window.outerWidth : 스크롤 바를 포함, 창의 너비

window.outerHeight :  스크롤 바를 포함한  창의 높이

 

 

jQuery에서 요소의 크기 구하기

높이

- .height() : 요소 높이만

- .innerHeight() : 요소의 padding을 포함한 높이

- .outerHeight() :  요소의 border, padding 포함한 높이

- .outerHeight(true) : 요소의 margin, border, padding 포함한 높이

 

너비

- .width() : 요소의 폭만

- .innerWidth() : 요소의 padding을 포함한 폭  

- .outerWidth() : 요소의 border, padding을 포함한 폭

- .outerWidth(true) :  요소의 margin, border, padding을 포함한 폭

 

만약 요소의 display:none; 일 때 높이 사이즈 취득 여부

 

구할 수 없는 것	구할 수 있는 것
offsetHeight	height
clientHeight	innerHeight
	outerHeight

 

스크롤 정보를 가져오는 방법

웹브라우저에서 현재 화면의 스크롤 정보를 알아야 할 경우가 있는데, 보통 아래의 방법을 많이 사용합니다.

// 화면의 Y축의 상단값

window.scrollY

// 화면의 Y축의 하단값

window.scrollY + window.innerHeight

브라우저 호환성

window.scrollY의 브라우저 호환성을 확인해보면 Internet Explorer(이하 IE)를 제외하고 모두 지원하며, 일부 모바일 환경에서 ?(알 수 없음)로 표시되어있습니다.

그리고 window.scrollY와 window.pageYOffset은 같은 속성이지만, 오래된 브라우저의 경우 window.scrollY 대신 window.pageYOffset만 지원할 수도 있으니 window.pageYOffset 사용을 권장하고 있습니다.

window.pageYOffset === window.scrollY; // 항상 true

브라우저 호환성을 위해 수정한 코드

예전에 window.scrollY를 사용했다가 IE 브라우저에서 스크롤을 해도 이벤트가 실행되지 않는다는 버그리포트가 들어온적이 있는데, window.pageYOffset으로 수정하여 해결하였습니다. 평화를 위해 window.pageYOffset 속성을 사용합시다. 😊

// 화면의 Y축의 상단값

window.pageYOffset

// 화면의 Y축의 하단값

window.pageYOffset + window.innerHeight

 

 

 

---

★해당 엘리먼트로 이동방법

<div id="move1" class="one box" ref="one" @click="one"><h1>1</h1></div>

mounted() {
		window.addEventListener('scroll', this.scrolled);
	},
	destroyed() {
		window.removeEventListener('scroll', this.scrolled);
	},
    methods: {		
		scrolled() {
			let scH = window.scrollY;
			let location3 = document.querySelector('#move3').offsetTop;
			if (scH < 1) {
				this.scrollY = false;
				console.log('1');
			} else if (scH > location3) {
				console.log('엘리먼트', location3);
				console.log('3');
				// window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
			} else if (scH > 100) {
				this.scrollY = true;
				console.log('2');
			}
		},
	},

 

근데 부모요소에 패딩값등이 있다면 패딩값을 포함하여 동작을 하여 예기치 않은 답이 나올때.

function getPosY(element){
	let posY = element.offsetTop; 
    if(element.offsetParent){ 
    	posY += element.offsetParent.offsetTop; 
    	} 
    return posY; 
	}

위와 같이 부모의 offsetTop을 더하면 됩니다.

출처

 

[JS] DOM element의 offsetTop