Capture Scroll by scrollbar

Question

Capture Scroll by scrollbar

Navigation

#1 by (2 votes)

0

User fills out a form and clicks register. The system opens a modal window with the "I agree" button disabled. Just by scrolling the scroll bar all the way down the button must be enabled to register. By scrolling the mouse or touchpad everything works but by clicking the bar and scrolling to the end, the button does not fire. It's a code that runs within WP.

Follow 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 too? Using Jquery version 1.12.4.

javascript jquery css

asked by anonymous 27.11.2016 / 20:07

1 answer

I lost the coding of the project Sending ajax with notification

score 2 · Accepted Answer

You only need to add event handler to 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: link