CODEWITHSUNDEEP
javascriptgetvalueresize-observer
KnowledgeLover
KnowledgeLover

Reputation: 1

How to get the new value in ResizeObzerver

This is my HTML code:

<div class="scrollable scrollable-y" id="scroll">
<ul class="chatlist contacts-container" id="contacts" data-autonomous="1">
  <a class="chatlist-chat rp" data-peer-id="100201777">
  <a class="chatlist-chat rp" data-peer-id="100201778">
  <a class="chatlist-chat rp" data-peer-id="100201779">
</ul>
<div>

The div with id "scroll" is scrollable and this belongs to telegram web contacts. Every "a" element is a contact and when we scroll through div, we get and contacts and more a's are fetched from server dynamically. When I use from script below, I realize that scrooHeight of ul child and thus scrollable div increases.

const container = $("#scroll");
const observer = new ResizeObserver(function() {
console.log('New scrollHeight', container[0].scrollHeight);});

container.children().each(function(index, child) {
observer.observe(child);})

My question is how do I get NEW value? something like

observer.container[0].scrollHeight.get();

Upvotes: 0

Views: 696

Answers (1)

KnowledgeLover
KnowledgeLover

Reputation: 1

const container = $("#contacts")[0];
const div = document.getElementsByClassName("scrollable scrollable-y")[1];

let resizeObserver = new ResizeObserver((entries) => {
        
        for (entry of entries) {
        console.log('New scrollHeight is: ', entries[0].contentRect.height);
}});

resizeObserver.observe(container);

By this script, you will see several result all of them are equal and the required new value of new scrollHeight . Thanks to @zerski to inspire me.

Upvotes: 0

Related Questions