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

问题描述

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

<这是我目前的代码：

  scrollToBottom（）{
 
 //如果scrollTop是大于高度，我们在底部，
 //在这种情况下，显示滚动动画
 let dimensions = this.content.getContentDimensions（）; 
让scrollHeight = dimensions.scrollHeight; 
让scrollTop = dimensions.scrollTop; 
让contentHeight = dimensions.contentHeight; 
 let heightAndScrollTop = contentHeight + scrollTop; 
 
 //这是我能得到的最好的，假设屏幕是一致的维度，我们都知道基本上不存在由于所有不同类型的屏幕
如果（（scrollHeight  -  heightAndScrollTop）< = 39&&（scrollHeight  -  heightAndScrollTop）> = 0）{
 this.content.scrollToBottom（300）; 
} 
} 
  

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

解决方案

首先，在内容底部创建一个元素：

 < ion-content> 
 //你的消息在这里
 ... 
< div id =check-point>< / div> <  - 注意这个元素
< / ion-content> 
  

第二，写一个函数来检测是否检查点元素在视口（可视区域）中是否完全。您可以在SO中轻松找到一个功能。这是一个简单的：

  //这个函数只是检查元素是否完全在垂直视口中而不是
 isElementInViewPort （元素：HTMLElement，viewPortHeight：number）{
 let rect = element.getBoundingClientRect（）; 
返回rect.top> = 0&& （rect.bottom< = viewPortHeight）; 
} 
  

最后，无论何时推送新消息，检查检查点是否在视口中。如果是，则表示用户位于页面底部。如果不是，则表示用户不是。

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.

Here is my current code:

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>

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

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.

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