I am trying to tie resizeObserver checking to dynamically updated height of an absolutely positioned div. Use case: a modal window wit various amount of copy popping up.
Here’s a portion of code that won’t trigger console.log with absolutely positioned div ( #absolute) in HTML. But when the position is changed to static – everything works just fine.
const observer = new ResizeObserver(entries => {
let finalScrollHeight = Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
);
console.log(finalScrollHeight);
});
observer.observe(document.documentElement);
Here is a working example:
https://jsfiddle.net/n2xydobf/1/
(I have added various heights to track the actual height change )
Thank you very much for our suggestions in advance.
PS: just in case- here’s fully working code as a CODE (not a link)
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scrollHeight</title>
<style>
html, body {
height: auto !important;
min-height: 100%;
}
body {
overflow: auto !important;
}
#absolute {
min-height: 100px;
width: 50vw;
background: #000;
position: absolute;
top: 0;
left: 0;
color: #fff;
line-height: 2rem;
box-sizing: border-box;
padding: 10px;
hyphens: auto;
}
#msg {
padding: 10px;
text-align: right;
background: #af0000;
color: #fff;
}
#button {
padding: 10px;
background: #ccc;
text-align: right;
cursor: pointer;
}
#main_container {
background: #555;
min-height: 220px;
}
</style>
</head>
<body>
<div id="main_container">
<div id="absolute"></div>
<div id="button">Click me</div>
<div id="msg">Msg</div>
</div>
<script>
const observer = new ResizeObserver(entries => {
let finalScrollHeight = Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
);
if (document.body.scrollHeight > document.documentElement.scrollHeight) {
finalScrollHeight = document.body.scrollHeight;
} else {
finalScrollHeight = document.documentElement.scrollHeight
}
console.log(finalScrollHeight);
});
observer.observe(document.documentElement);
var text1 = "In which it is proved that, notwithstanding their names’ ending in os and is, the heroes of the story which we are about to have the honor to relate to our readers have nothing mythological about them.A short time ago, while making researches in the Royal Library for my History of Louis XIV., I stumbled by chance upon the Memoirs of M. d’Artagnan, printed—as were most of the works of that period, in which authors could not tell the truth without the risk of a residence, more or less long, in the Bastille—at Amsterdam, by Pierre Rouge. The title attracted me; I took them home with me, with the permission of the guardian, and devoured them. It is not my intention here to enter into an analysis of this curious work; and I shall satisfy myself with referring such of my readers as appreciate the pictures of the period to its pages. They will therein find portraits penciled by the hand of a master; and although these squibs may be, for the most part, traced upon the doors of barracks and the walls of cabarets, they will not find the likenesses of Louis XIII., Anne of Austria, Richelieu, Mazarin, and the courtiers of the period, less faithful than in the history of M. Anquetil.In which it is proved that, notwithstanding their names’ ending in os and is, the heroes of the story which we are about to have the honor to relate to our readers have nothing mythological about them.A short time ago, while making researches in the Royal Library for my History of Louis XIV., I stumbled by chance upon the Memoirs of M. d’Artagnan, printed—as were most of the works of that period, in which authors could not tell the truth without the risk of a residence, more or less long, in the Bastille—at Amsterdam, by Pierre Rouge. The title attracted me; I took them home with me, with the permission of the guardian, and devoured them. It is not my intention here to enter into an analysis of this curious work; and I shall satisfy myself with referring such of my readers as appreciate the pictures of the period to its pages. They will therein find portraits penciled by the hand of a master; and although these squibs may be, for the most part, traced upon the doors of barracks and the walls of cabarets, they will not find the likenesses of Louis XIII., Anne of Austria, Richelieu, Mazarin, and the courtiers of the period, less faithful than in the history of M. Anquetil.";
var text2 = 'This being understood, let us proceed with our history.';
var text3 = ' I stumbled by chance upon the Memoirs of M. d’Artagnan, printed—as were most of the works of that period, in which authors could not tell the truth without the risk of a residence, more or less long, in the Bastille—at Amsterdam, by Pierre Rouge. The title attracted me; I took them home with me, with the permission of the guardian, and devoured them.I stumbled by chance upon the Memoirs of M. d’Artagnan, printed—as were most of the works of that period, in which authors could not tell the truth without the risk of a residence, more or less long, in the Bastille—at Amsterdam, by Pierre Rouge. The title attracted me; I took them home with me, with the permission of the guardian, and devoured them.';
var text4 = "In which it is proved that, notwithstanding their names’ ending in os and is, the heroes of the story which we are about to have the honor to relate to our readers have nothing mythological about them.A short time ago, while making researches in the Royal Library for my History of Louis XIV., I stumbled by chance upon the Memoirs of M. d’Artagnan, printed—as were most of the works of that period, in which authors could not tell the truth without the risk of a residence, more or less long, in the Bastille—at Amsterdam, by Pierre Rouge. The title attracted me; I took them home with me, with the permission of the guardian, and devoured them. It is not my intention here to enter into an analysis of this curious work; and I shall satisfy myself with referring such of my readers as appreciate the pictures of the period to its pages. They will therein find portraits penciled by the hand of a master; and although these squibs may be, for the most part, traced upon the doors of barracks and the walls of cabarets, they will not find the likenesses of Louis XIII., Anne of Austria, Richelieu, Mazarin, and the courtiers of the period, less faithful than in the history of M. Anquetil.In which it is proved that, notwithstanding their names’ ending in os and is, the heroes of the story which we are about to have the honor to relate to our readers have nothing mythological about them.A short time ago, while making researches in the Royal Library for my History of Louis XIV., I stumbled by chance upon the Memoirs of M. d’Artagnan, printed—as were most of the works of that period, in which authors could not tell the truth without the risk of a residence, more or less long, in the Bastille—at Amsterdam, by Pierre Rouge. The title attracted me; I took them home with me, with the permission of the guardian, and devoured them. It is not my intention here to enter into an analysis of this curious work; and I shall satisfy myself with referring such of my readers as appreciate the pictures of the period to its pages. They will therein find portraits penciled by the hand of a master; and although these squibs may be, for the most part, traced upon the doors of barracks and the walls of cabarets, they will not find the likenesses of Louis XIII., Anne of Austria, Richelieu, Mazarin, and the courtiers of the period, less faithful than in the history of M. Anquetil.";
var text5 = 'This being understood, let us proceed with our history.';
var text6 = ' I stumbled by chance upon the Memoirs of M. d’Artagnan, printed—as were most of the works of that period, in which authors could not tell the truth without the risk of a residence, more or less long, in the Bastille—at Amsterdam, by Pierre Rouge. The title attracted me; I took them home with me, with the permission of the guardian, and devoured them.I stumbled by chance upon the Memoirs of M. d’Artagnan, printed—as were most of the works of that period, in which authors could not tell the truth without the risk of a residence, more or less long, in the Bastille—at Amsterdam, by Pierre Rouge. The title attracted me; I took them home with me, with the permission of the guardian, and devoured them.';
let button = document.getElementById('button');
let absoluteDiv = document.getElementById('absolute');
let msgDiv = document.getElementById('msg');
const texts_array = [text1, text2, text3, text4, text5, text6];
button.addEventListener('click', function () {
const random = Math.floor(Math.random() * texts_array.length);
absoluteDiv.innerHTML = texts_array[random];
msgDiv.innerHTML = 'document.body.scrollHeight: ' + document.body.scrollHeight +
'<br />document.documentElement.scrollHeight: ' + document.documentElement.scrollHeight +
'<br />document.body.offsetHeight: ' + document.body.offsetHeight +
'<br />document.documentElement.offsetHeight: ' + document.documentElement.offsetHeight +
'<br />document.body.clientHeight' + document.body.clientHeight +
'<br />document.documentElement.clientHeight: ' + document.documentElement.clientHeight;
}, false);
</script>
</body>
</html>
