离子 - 如何确定滚动是否在内容的底部 [英] Ionic - How to determine if scroll is at the bottom of the content

问题描述

我的应用程序中有一些聊天功能，当输入新消息时，它会自动滚动到 <ion-content> 的底部，但是，与许多聊天应用程序一样，如果您'在聊天中向上滚动以阅读最新消息之前的内容，我不想滚动.只有当用户位于屏幕的最底部时，一旦有新消息进入，我才想滚动到底部.我还没有解决这个问题.

I have some chat functionality in my app where when a new message is entered, it automatically scrolls to the bottom of the <ion-content>, however, like many chat applications, if you're scrolled up in the chat to read something previous to the latest message, I'd like to NOT scroll. Only when the user is at the very bottom of the screen, would I like to scroll to the bottom, once the new message comes in. I have yet to solve this issue.

这是我当前的代码:

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

知道我能做些什么来解决这个问题吗?

Any idea what I can do to solve this?

推荐答案

首先，在你的内容底部创建一个元素:

First, create an element at the bottom of your content:

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

第二，编写一个函数来检测check-point元素是否full在viewport(可视区域)中.你可以很容易地在 SO 中找到一个函数.这是一个简单的:

Second, write a function to detect whether check-point element is fully in viewport (viewable area) or not. You can easily find a function in SO. Here is a simple one:

   //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 是否在视口中.如果是，则表示用户位于页面底部.如果不是，则表示用户不是.

Finally, Whenever you push a new message, check if check-point is in viewport. If yes, it means user is in bottom of page. If no, it means user is not.

这篇关于离子 - 如何确定滚动是否在内容的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！