当用户通过滚动到达页面末端时，启用该按钮。

Question

我正在尝试创建一个条款和条件页面，其中我有'我同意'按钮，当用户在页面的顶部中间时，该按钮应该被禁用。当用户到达页面末端时，该按钮应该被激活。为此，我想使用HostlistnerDirectiveevent绑定，它将监听滚动并获取滚动的位置，当它到达底部时通知并启用 "我同意 "按钮。有什么其他方法吗？我是新来的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

你可以使用 滚动顶部 和 高度 与当前位置相关的信息。

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

更多详情，请仔细看看这个答案。 https:/stackoverflow.coma425471369293934。