Включите кнопку, когда пользователь дошел до конца страницы путем прокрутки - PullRequest
Новая
       33

Включите кнопку, когда пользователь дошел до конца страницы путем прокрутки

0 голосов
/ 29 мая 2020

Я пытаюсь создать страницу условий и положений, на которой у меня есть кнопка «Я согласен», которая должна быть отключена, когда пользователь находится вверху / в середине страницы. Когда пользователь достигает конца страницы, кнопка должна быть активирована. Для этого я хочу иметь привязку 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;

}

1 Ответ

0 голосов
/ 02 июня 2020

Вы можете использовать информацию scrollTop и height в связи с текущей позицией. 

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

Для получения дополнительной информации ознакомьтесь с этим ответом :
{ ссылка }

...