Capture Scroll by Scroll Bar

Asked

Viewed 966 times

0

User fills in a form and clicks to register. The system opens a modal window with the "agree" button disabled. Only by scrolling the scroll bar to the end is the button enabled to register. By the mouse scroll or touchpad everything works but by clicking on the bar and scrolling to the end, the button is not triggered. It’s a code that runs inside the WP.

Follows the code:

 <div id="popup" class="popup-content">
                    <div class="popup-inner" style="padding:20px;">
                      <p>
                        Por favor, solicitamos que leia o contrato até o final antes de clicar em aceitar, obrigado.
                      </p>
                      <div class="termos form--termos" id="termos" name="termos" style="height: 200px;overflow: scroll;background: #f2f2f2;margin-bottom: 10px;padding: 10px;">
                      bla bla bla bla bla
                      </div>

                      <a href="recusa" class="button button_large">
                        <span style="padding: 15px 30px;font-size: 110%;line-height: 110%;">Não aceito</span>
                      </a>

                      <button type="submit" class="button button_large form--btn-cadastro" >
                        <span class="button_label" style="padding: 15px 30px;font-size: 110%;line-height: 110%;">Concordo</span>
                      </button>
                      <hr class="no_line" style="margin: 0 auto 20px;">
                    </div>
                  </div>

JS:

     var $j = jQuery.noConflict();
  $j(document).ready(function() {
var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
    $j(".termos").live(mousewheelevt, function(e){


      if($j(this).scrollTop() + $j(this).innerHeight() >= $j(this)[0].scrollHeight) {
        $j('.form--btn-cadastro').attr('disabled', false).css('opacity', '1');
      }

      $j(".form--btn-cadastro").click(function() {
        $j("#form_cadastro").submit();
      });

    });

How to enable the button by scrolling the bar as well? Using version 1.12.4 of Jquery.

inserir a descrição da imagem aqui

javascript jquery css

1 answer

2


You only need to add one event handler at the onscroll of the element.

var readAll = false;
$elToBeRead.on("scroll", function() {

   if (readAll) return;

   readAll = this.scrollHeight - this.scrollTop === this.clientHeight;

   if (readAll) // ativar botao...
});

Demo: https://jsfiddle.net/ny6yct6k/

Browser other questions tagged javascript jquery css

You are not signed in. Login or sign up in order to post.