자바스크립트를 사용하여 창 크기가 조정될 때 탐지?

자바스크립트를 사용하여 창 크기가 조정될 때 탐지?

사용자가 브라우저 창 크기를 조정하기 위해 종료할 때 jQuery나 JavaScript로 기능을 트리거할 수 있는 방법이 있습니까?

다른 뜻:

1. 사용자가 브라우저 창 크기를 조정할 때 마우스 위로 이벤트를 감지할 수 있습니까?그렇지 않은 경우:
2. 윈도우 크기 조정 작업이 완료되면 확인할 수 있습니까?

사용자가 jQuery를 사용하여 창 크기를 조정하기 시작할 때만 이벤트를 트리거할 수 있습니다.

를 사용하여 너비/높이가 실제로 변경될 때마다 다음과 같이 얻을 수 있습니다.

$(window).resize(function() {
  //resize just happened, pixels changed
});

여기에서 작동 중인 데모를 볼 수 있습니다. 이 데모는 새로운 높이/폭 값을 가져와 페이지에서 업데이트합니다.이벤트는 실제로 시작되거나 종료되는 것이 아니라 크기가 조정될 때 "발생"한다는 것을 기억하십시오.또 다른 일이 일어나지 않을 거라고 말할 필요는 없습니다.

---

편집: 코멘트를 보면 "온엔드" 이벤트와 같은 것을 원하는 것 같습니다. 몇 가지 예외를 제외하고 발견한 솔루션이 이를 수행합니다(마우스 업과 일시 중지를 크로스 브라우저 방식으로 구분할 수 없음, 종료와 일시 중지도 동일함).이벤트를 생성하면 다음과 같이 좀 더 깨끗하게 만들 수 있습니다.

$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

어디엔가 기본 파일이 있을 수도 있어요 당신이 하고 싶은 건 뭐든...그러면 당신은 그 새로운 것에 묶을 수 있습니다.resizeEnd당신이 유발하는 사건은 다음과 같습니다.

$(window).bind('resizeEnd', function() {
    //do something, window hasn't changed size in 500ms
});

이 접근 방식에 대한 작업 데모는 여기에서 확인할 수 있습니다.

자바스크립트만을 사용하여 이를 수행하는 또 다른 방법은 다음과 같습니다.

window.addEventListener('resize', functionName);

이것은 다른 대답처럼 크기가 변할 때마다 실행됩니다.

functionName는 창 크기가 조정될 때 실행되는 함수의 이름입니다(끝의 괄호는 필요 없음).

이는 자바스크립트에서 GlobalEventHandlers 인터페이스의 onresize 속성을 사용하여 다음과 같은 함수를 onresize 속성에 할당할 수 있습니다.

window.onresize = functionRef;

다음 코드 조각은 콘솔에서 내부 너비와 내부를 기록하여 이를 보여줍니다.크기가 조정될 때마다 윈도우의 높이. (윈도우 크기가 조정된 후 이벤트가 발생)

function resize() {
  console.log("height: ", window.innerHeight, "px");
  console.log("width: ", window.innerWidth, "px");
}

window.onresize = resize;

<p>In order for this code snippet to work as intended, you will need to either shrink your browser window down to the size of this code snippet, or fullscreen this code snippet and resize from there.</p>

스크롤이 종료된 경우에만 확인하려면 Vanilla JS에서 다음과 같은 해결책을 생각해 낼 수 있습니다.

슈퍼콤팩트

var t
window.onresize = () => { clearTimeout(t) t = setTimeout(() => { resEnded() }, 500) }
function resEnded() { console.log('ended') }

세 가지 가능한 조합 모두(ES6)

var t
window.onresize = () => {
    resizing(this, this.innerWidth, this.innerHeight) //1
    if (typeof t == 'undefined') resStarted() //2
    clearTimeout(t); t = setTimeout(() => { t = undefined; resEnded() }, 500) //3
}

function resizing(target, w, h) {
    console.log(`Youre resizing: width ${w} height ${h}`)
}    
function resStarted() { 
    console.log('Resize Started') 
}
function resEnded() { 
    console.log('Resize Ended') 
}

언급URL : https://stackoverflow.com/questions/2996431/detect-when-a-window-is-resized-using-javascript