use new observer

plugins/plugins/core/components/ChatScroller.js

@@ -211,6 +211,7 @@ class ChatScroller extends LitElement {
         this.messages = []
         this._upObserverhandler = this._upObserverhandler.bind(this)
         this._downObserverHandler = this._downObserverHandler.bind(this)
+        this.__bottomObserverForFetchingMessagesHandler = this.__bottomObserverForFetchingMessagesHandler.bind(this)
         this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
         this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]")
         this.openTipUser = false
@@ -304,8 +305,9 @@ class ChatScroller extends LitElement {
                             </message-template>`
             )
         })}
+                        <div style=${"height: 1px; margin-top: -100px"} id='bottomObserverForFetchingMessages'></div>
+
                 <div style=${"height: 1px;"} id='downObserver'></div>
-                <!-- <div style=${"height: 1px; margin-top: -100px"} id='bottomObserverForFetchingMessages'></div> -->
 
             </ul>
         `
@@ -369,9 +371,11 @@ class ChatScroller extends LitElement {
         this.viewElement = this.shadowRoot.getElementById('viewElement')
         this.upObserverElement = this.shadowRoot.getElementById('upObserver')
         this.downObserverElement = this.shadowRoot.getElementById('downObserver')
+        this.bottomObserverForFetchingMessages = this.shadowRoot.getElementById('bottomObserverForFetchingMessages')
         // Intialize Observers
         this.upElementObserver()
         this.downElementObserver()
+        this.bottomObserver()
         await this.getUpdateComplete()
         this.viewElement.scrollTop = this.viewElement.scrollHeight + 50
 
@@ -425,8 +429,14 @@ class ChatScroller extends LitElement {
         if (!entries[0].isIntersecting) {
             this.showLastMessageRefScroller(true)
         } else {
-            let _scrollElement = entries[0].target.previousElementSibling
             this.showLastMessageRefScroller(false)
+        }
+    }
+
+    __bottomObserverForFetchingMessagesHandler(entries){
+        if (!entries[0].isIntersecting) {
+        } else {
+            let _scrollElement = entries[0].target.previousElementSibling
             this._getAfterMessages(_scrollElement)
         }
     }
@@ -453,6 +463,18 @@ class ChatScroller extends LitElement {
         // passing it the element to observe, and the options object
         observer.observe(elementToObserve)
     }
+    bottomObserver() {
+        const options = {
+            
+        }
+        // identify an element to observe
+        const elementToObserve = this.bottomObserverForFetchingMessages
+        // passing it a callback function
+        const observer = new IntersectionObserver(this.__bottomObserverForFetchingMessagesHandler, options)
+        // call `observe()` on that MutationObserver instance,
+        // passing it the element to observe, and the options object
+        observer.observe(elementToObserve)
+    }
 }
 
 window.customElements.define('chat-scroller', ChatScroller)