检查用户是不是在 Angular 2 中滚动到底部

关键词：

【中文标题】检查用户是不是在 Angular 2 中滚动到底部【英文标题】：Check if user has scrolled to the bottom in Angular 2检查用户是否在 Angular 2 中滚动到底部 【发布时间】：2016-11-10 02:39:13 【问题描述】：

在没有 jQuery 的情况下，检查用户是否在 Angular2 中滚动到页面底部的最佳做法是什么？我可以访问我的应用程序组件中的窗口吗？如果不是，我应该检查是否滚动到页脚组件的底部，我该怎么做？页脚组件的指令？有人做到了吗？

【问题讨论】：

这个在 Angular 6 中工作 --> ***.com/a/42547136/621951 【参考方案1】：

//你可以用这个。

@HostListener("window:scroll", [])
onScroll(): void 
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) 
        // you're at the bottom of the page
    

【讨论】：

必须将其写为 @HostListener("window:scroll", []) 才能使其工作。 "document.body.offsetHeight - 1" 可能会更好。 对我来说这有效 - (window.innerHeight + window.scrollY) >= document.body.scrollHeight 这可行，但就像底部上方的一些像素一样。我们如何检测用户是否已经滚动到最后？【参考方案2】：

对我来说，聊天框的底部不在页面底部，因此我无法使用 window.innerHeight 查看用户是否滚动到聊天框的底部。 （我的目标是始终滚动到聊天的底部，除非用户试图向上滚动）

我改用了以下方法，效果很好：

let atBottom = element.scrollHeight - element.scrollTop === element.clientHeight

一些上下文：

@ViewChild('scrollMe') private myScrollContainer: ElementRef;
disableScrollDown = false

 ngAfterViewChecked() 
    this.scrollToBottom();


private onScroll() 
    let element = this.myScrollContainer.nativeElement
    let atBottom = element.scrollHeight - element.scrollTop === element.clientHeight
    if (this.disableScrollDown && atBottom) 
        this.disableScrollDown = false
     else 
        this.disableScrollDown = true
    



private scrollToBottom(): void 
    if (this.disableScrollDown) 
        return
    
    try 
        this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
     catch(err)  

和

<div class="messages-box" #scrollMe (scroll)="onScroll()">
    <app-message [message]="message" *ngFor="let message of messages.slice().reverse()"></app-message>
 </div>

【讨论】：

【参考方案3】：

而不是使用 document.body.offsetHeight 使用这个：

if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) // you're at the bottom of the page

【讨论】：

scrollHeight 值与 offsetHeight 有何不同？【参考方案4】：

使用 @HostListener 装饰器监听 window:scroll 事件。

@HostListener('window:scroll', [])
onScroll(): void 
  const triggerAt: number = 128; 
  /* perform an event when the user has scrolled over the point of 128px from the bottom */
  if (document.body.scrollHeight - (window.innerHeight + window.scrollY) <= triggerAt) 
    doSomething();
  

使用scrollHeight 而不是offsetHeight 或clientHeight 如果内容将事件挂钩到可滚动。

【讨论】：

找出 ListView 是不是滚动到底部？

】找出ListView是不是滚动到底部？【英文标题】：FindoutifListViewisscrolledtothebottom?找出ListView是否滚动到底部？【发布时间】：2011-07-0415:59:10【问题描述】：我可以知道我的ListView是否滚动到底部吗？我的意思是最后一项是完全可见... 查看详情

如果用户将窗口滚动到底部[重复]

...uplicate]【发布时间】：2014-01-1008:53:17【问题描述】：如何检查用户是否滚动到页面底部？$(window).scroll(function()if($(window).scrollTop()==$(document).height()-$(window).height()));不起作用。它仅适用于页面顶部.. 查看详情

如何确定 div 是不是滚动到底部？

】如何确定div是不是滚动到底部？【英文标题】：HowcanIdetermineifadivisscrolledtothebottom?如何确定div是否滚动到底部？【发布时间】：2010-10-2622:36:34【问题描述】：如何在不使用jQuery或任何其他JavaScript库的情况下确定带有垂直滚动条... 查看详情

更改路线不会在新页面中滚动到顶部

...欢迎的行为，至少对我来说是这样。在教程的第11步http://angular.github.io/angular-phonecat/step-11/app/#/phones你可以看到手机列表。如果您滚动到底部并 查看详情

如何在反应中滚动到底部？

】如何在反应中滚动到底部？【英文标题】：Howtoscrolltobottominreact?【发布时间】：2016-10-0321:25:47【问题描述】：我想搭建一个聊天系统，在进入窗口和有新消息进来时自动滚动到底部。React中如何自动滚动到容器底部？【问题讨... 查看详情

除非用户向上滚动，否则保持溢出 div 滚动到底部

】除非用户向上滚动，否则保持溢出div滚动到底部【英文标题】：Keepoverflowdivscrolledtobottomunlessuserscrollsup【发布时间】：2013-09-0723:42:23【问题描述】：我有一个只有300像素大的div，我希望它在页面加载时滚动到内容的底部。这个d... 查看详情

自动滚动面板到底部

...描述】：我的winforms中有一个面板，我在其中加载了一些用户控件。我想在每次添加新的用户控件时自动滚动到面板底部（当我的面板填充时）。我该怎么做？【问题讨论】：【参考方案1】：您可以通过设置面板的VerticalScroll来... 查看详情

在 WebBrowser 控件中检测滚动到底部

】在WebBrowser控件中检测滚动到底部【英文标题】：DetectscrolltobottominWebBrowsercontrol【发布时间】：2017-05-1914:41:00【问题描述】：我正在创建一个Windows窗体以接受公司的某些条款和条件。因此，条款和条件在网络上，并通过WebBrowser... 查看详情

仅在滚动到底部时将页脚固定到底部

...描述】：我想将页脚固定在浏览器窗口的底部，但仅限于用户已经位于页面底部的情况。如果您在Safari中的iOS8或OSXMavericks/Yosemite上注意到，当您滚动超过页面限制时，会显示更多内容以获得弹性反弹效果。当你有一个固定的标 查看详情

滚动到底部时 TableView 加载更多单元格

...：2017-10-3016:45:17【问题描述】：我创建了一个tableView，当用户滚动到最后一个单元格时，将加载更多数据。在willDisplayCell中，我实现了这段代码，参考了堆栈溢出中的类似问题。但是当我滚动到底部时，它不会加载一次数据，它... 查看详情

Android ListView 滚动到底部

...正在开发带有聊天功能的应用程序，我希望我的ListView在用户发布新消息以及用户位于列表底部并且收到新消息时滚动到底部。我正在使用这个ListView：<ListViewandroid:id="@+id/list"android:layout_andr 查看详情

如何以编程方式将 ScrollView 滚动到底部

...法解决的问题：在ScrollView中我只有一个线性布局。通过用户操作，我以编程方式添加2TextView在此LinearLayout上，但默认情况下滚动保持在顶部。由于我控制用户操作，我应该很容易滚动到底部有类 查看详情

我怎么知道滚动视图已经滚动到底部？

...我只想在它已经滚动到底部时发生一个事件，但我找不到检查滚动视图是否在底部的方法。我已经解决了相反的问题；仅当事件已滚动到顶部时才允许发生：ScrollViewsv=(ScrollView)find 查看详情

在 angular2 的新页面中，路线更改视图不会滚动到顶部

】在angular2的新页面中，路线更改视图不会滚动到顶部【英文标题】：Onroutechangeviewdoesn\'tscrolltotopinthenewpageinangular2【发布时间】：2017-02-1707:17:03【问题描述】：我已经在router-outlet上尝试过autoscroll="false"但似乎不起作用，... 查看详情

在angularjs的聊天框中滚动到底部

】在angularjs的聊天框中滚动到底部【英文标题】：Scrolltobottominchatboxinangularjs【发布时间】：2014-12-0805:52:31【问题描述】：每当有新消息时，我都会尝试自动滚动到底部。我的代码移动了滚动条，但它没有将它带到确切的底部。... 查看详情

UIScrollView 在 iOS 7 中没有滚动到底部

】UIScrollView在iOS7中没有滚动到底部【英文标题】：UIScrollViewnotscrollingtobottominiOS7【发布时间】：2014-02-1301:34:22【问题描述】：在以下代码示例中，self.contentView指的是有问题的UIScrollView。//Scrolltobottom.CGPointbottomOffset=CGPointMake(0,self.... 查看详情

js判断页面中的iframe中显示的内容是不是被拉到底部

在当前页面有个iframe，一个checkbox，两个button。当iframe内显示的内容滚动到底部时，checkbox可点击，否则是disable的，当没选中checkbox时，点击两个button，会出现相应的对话框。我在当前页面中，想用document.getElementById("Iframe1&quo... 查看详情

Flutter ListView 在构建时滚动到底部

】FlutterListView在构建时滚动到底部【英文标题】：FlutterListViewscrolltobottomonbuild【发布时间】：2020-07-1623:06:31【问题描述】：是否可以在Flutter列表视图最初加载所有数据后滚动到底部？我知道scrollController.jumpTo()逻辑，但是必须在... 查看详情