Dies ist eine wirklich alte Frage, aber ich dachte mir, ich poste mal meine Lösung dazu.
Ich habe versucht, die ResizeSensor da alle ziemlich verknallt in sie zu sein schienen. Nach der Implementierung wurde mir jedoch klar, dass die Elementabfrage unter der Haube erfordert, dass das betreffende Element die Position relative o absolute angewandt, was in meiner Situation nicht funktioniert hat.
Ich habe das mit einem Rxjs gelöst. interval anstelle einer geraden setTimeout o requestAnimationFrame wie frühere Implementierungen.
Das Schöne an der beobachtbaren Variante eines Intervalls ist, dass man den Datenstrom so ändern kann, wie jede andere beobachtbare Größe auch behandelt werden kann. Für mich war eine grundlegende Implementierung genug, aber Sie könnten verrückt werden und alle Arten von Zusammenführungen usw. tun.
Im folgenden Beispiel verfolge ich die Änderungen der Breite des inneren (grünen) Divs. Es hat eine Breite auf 50 % festgelegt, aber eine max-Breite von 200px. Das Ziehen des Schiebereglers wirkt sich auf die Breite des Wrapper-Divs (grau) aus. Sie können sehen, dass die beobachtbare nur feuert, wenn die innere div's Breite ändert, die nur geschieht, wenn die äußere div's Breite kleiner als 400px ist.
const { interval } = rxjs;
const { distinctUntilChanged, map, filter } = rxjs.operators;
const wrapper = document.getElementById('my-wrapper');
const input = document.getElementById('width-input');
function subscribeToResize() {
const timer = interval(100);
const myDiv = document.getElementById('my-div');
const widthElement = document.getElementById('width');
const isMax = document.getElementById('is-max');
/*
NOTE: This is the important bit here
*/
timer
.pipe(
map(() => myDiv ? Math.round(myDiv.getBoundingClientRect().width) : 0),
distinctUntilChanged(),
// adding a takeUntil(), here as well would allow cleanup when the component is destroyed
)
.subscribe((width) => {
widthElement.innerHTML = width;
isMax.innerHTML = width === 200 ? 'Max width' : '50% width';
});
}
function defineRange() {
input.min = 200;
input.max = window.innerWidth;
input.step = 10;
input.value = input.max - 50;
}
function bindInputToWrapper() {
input.addEventListener('input', (event) => {
wrapper.style.width = `${event.target.value}px`;
});
}
defineRange();
subscribeToResize();
bindInputToWrapper();
.inner {
width: 50%;
max-width: 200px;
}
/* Aesthetic styles only */
.inner {
background: #16a085;
}
.wrapper {
background: #ecf0f1;
color: white;
margin-top: 24px;
}
.content {
padding: 12px;
}
body {
font-family: sans-serif;
font-weight: bold;
}
<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>
<h1>Resize Browser width</h1>
<label for="width-input">Adjust the width of the wrapper element</label>
<div>
<input type="range" id="width-input">
</div>
<div id="my-wrapper" class="wrapper">
<div id="my-div" class="inner">
<div class="content">
Width: <span id="width"></span>px
<div id="is-max"></div>
</div>
</div>
</div>
