当用户通过滚动到达页面末尾时启用按钮

Question

我正在尝试创建一个条款和条件页面，其中有 'I Agree' 按钮，当用户位于页面的 top/middle 时，该按钮应该被禁用。当用户到达页面末尾时，应启用该按钮。为此，我想要 Hostlistner/Directive/event 绑定，它将监听滚动并获取滚动的位置并在它到达底部时通知并启用我同意按钮。还有其他方法吗？我是 angular 的新手。提前致谢

我的html

<div class="modal-body" #agreement>
           <h6 class="inittext">You must scroll to the end of the terms and conditions And press "Agree" 
            to continue with your request.</h6> 
            <p style="font-weight:bold">Lorem ipsum dolor sit amet<br></p>
            <p> consectetur adipiscing elit, sed do eiusmod tempor incididunt 
              ut labore et dolore magna aliqua. Ac ut consequat semper viverra nam libero justo laoreet. 
              Amet massa vitae tortor condimentum. Aliquam sem et tortor consequat id porta nibh venenatis
               cras. Sed id semper risus in hendrerit gravida rutrum quisque.<br></p>
               <p style="font-weight:bold"> Fermentum posuere urna <br></p>
                <p>nec tincidunt praesent semper feugiat. Ullamcorper malesuada proin libero nunc consequat 
               interdum varius. Habitasse platea dictumst quisque sagittis purus sit amet. Dictum non 
               consectetur a erat nam. Duis tristique sollicitudin nibh sit amet commodo. 
               Tincidunt tortor aliquam nulla facilisi cras fermentum. Massa sapien faucibus 
               et molestie ac.</p>
               <p style="font-weight:bold">Mi bibendum <br></p>
               <p> neque egestas congue quisque egestas diam in. Aliquet porttitor lacus luctus 
                 accumsan tortor posuere ac ut. Odio tempor orci dapibus ultrices in iaculis nunc. Sit amet
                  venenatis urna cursus eget.<br></p> 
                  <p>Eget magna fermentum iaculis eu non diam. Enim praesent 
                  elementum facilisis leo vel. Quam nulla porttitor massa id neque aliquam vestibulum. Arcu 
                  cursus vitae congue mauris. Tempus quam pellentesque nec nam aliquam sem et tortor. Rhoncus 
                  est pellentesque elit ullamcorper dignissim cras tincidunt lobortis.<br></p> <p> Tristique senectus et
                   netus et malesuada. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum. 
                   Sed risus ultricies tristique nulla aliquet enim tortor. Nunc non blandit massa enim nec 
                   dui nunc. Purus gravida quis blandit turpis cursus in hac habitasse platea.</p>
                   <h6 class="inittext">You must press "Agree" to continue with your request.</h6>
         </div> 
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-primary" style="float: left">Save as PDF</button>
          <button type="button" class="btn btn-outline-primary">Disagree</button>
          <button type="button" class="btn btn-primary" disabled>Agree</button>
        </div>

我的ts文件

import { Component,ElementRef, ViewChild, HostListener, AfterViewInit } from '@angular/core';

@Component({
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {
  @ViewChild('agreement') agreement : ElementRef;

}

Answer 1

您可以使用与当前位置相关的scrollTop和height信息。

document.documentElement.scrollTop + document.documentElement.offsetHeight
document.documentElement.scrollHeight

有关详细信息，请仔细查看此答案：

当用户通过滚动到达页面末尾时启用按钮

Enable the button when the user has reached end of the page by scrolling

html

css

angular8