ResizeObserver с динамически изменяющейся высотой абсолютно позиционированного Div ⇐ Javascript

[Anonymous]

Я пытаюсь связать проверку ResizeObserver с динамически обновленной высотой абсолютно позиционированного Div. Используйте вариант: модальное окно с различным количеством копирования. Но когда позиция изменилась на статичную - все работает просто отлично. < /P>
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);

Вот рабочий пример:
https://jsfiddle.net/n2xydobf/1/образно (не ссылка) < /p>





scrollHeight

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;
}





Click me
Msg




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 +
'
document.documentElement.scrollHeight: ' + document.documentElement.scrollHeight +
'
document.body.offsetHeight: ' + document.body.offsetHeight +
'
document.documentElement.offsetHeight: ' + document.documentElement.offsetHeight +
'
document.body.clientHeight' + document.body.clientHeight +
'
document.documentElement.clientHeight: ' + document.documentElement.clientHeight;

}, false);







Подробнее здесь: https://stackoverflow.com/questions/796 ... tioned-div