離子 - 如何確定滾動是否在內容的底部

我在我的應用程序中有一些聊天功能，當輸入新消息時，它會自動滾動到<ion-content>的底部，但是，像許多聊天應用程序一樣，如果您在聊天中滾動閱讀最新消息之前的內容，我不想滾動。只有當用戶位於屏幕的最底部時，我才喜歡滾動到底部，一旦新消息進入，我還沒有解決這個問題。離子 - 如何確定滾動是否在內容的底部

這裏是我當前的代碼：

scrollToBottom() { 

    // If the scrollTop is greater than the height, we are at the bottom, 
    // in which case, show scrolling animation 
    let dimensions = this.content.getContentDimensions(); 
    let scrollHeight = dimensions.scrollHeight; 
    let scrollTop = dimensions.scrollTop; 
    let contentHeight = dimensions.contentHeight; 
    let heightAndScrollTop = contentHeight + scrollTop; 

    // This is the best I can get, assuming that the screen is in a consistent dimension, which we all know is basically non-existent due to all the different types of screens 
    if((scrollHeight - heightAndScrollTop) <= 39 && (scrollHeight - heightAndScrollTop) >= 0) { 
    this.content.scrollToBottom(300); 
    } 
}

任何想法，我能做些什麼來解決這個問題？

來源

2017-10-19 Stevie Star

首先，在內容的底部創建一個元素：

<ion-content> 
    //Your messages go here 
    ... 
    <div id="check-point"></div> <-- Notice this element 
</ion-content>

二，編寫一個函數來檢測check-point元素是否在視口中完全（可視區域）或沒有。你可以很容易地在SO中找到一個功能。下面是一個簡單的一個：

//This function just check if element is fully in vertical viewport or not 
    isElementInViewPort(element: HTMLElement, viewPortHeight: number) { 
     let rect = element.getBoundingClientRect(); 
     return rect.top >= 0 && (rect.bottom <= viewPortHeight); 
    }

最後，當你推一個新的消息，檢查是否check-point在口中。如果是，則表示用戶處於頁面底部。如果不是，則意味着用戶不是。

來源

2017-10-19 02:15:05 Duannx

離子 - 如何確定滾動是否在內容的底部

回答

相關問題