Call function on scroll only once

前端 未结 4 1755
悲&欢浪女
悲&欢浪女 2021-01-01 23:48

I got a question regarding a function that will be called if the object is within my screen. But when the object is within my screen the function is been called and a alert

相关标签:
4条回答
  • 2021-01-01 23:55
    $(window).on('scroll', function() {
      if ($(document).scrollTop() >= $(document).height() / 100) {
        $("#spopup").show("slow");
        $(window).off('scroll');
      } else {
        $("#spopup").hide("slow");
      }
    });
    
    function closeSPopup() {
      $('#spopup').hide('slow');
    }
    

    worked for me

    0 讨论(0)
  • 2021-01-02 00:08

    when the $test is within in you screen, remove the event listener.

    $(window).on('scroll',function() {
        if (checkVisible($('#tester'))) {
           alert("Visible!!!")   
           $(window).off('scroll');
        } else {
        // do nothing
        }
    });
    
    0 讨论(0)
  • 2021-01-02 00:15

    Let's try to solve your problem in javascript as all of the answers here are in jquery. You can use global variable as browser retains its value as long as the page is not refreshed. All those variables declared outside the function are called global variables and can be accessed by any function.

    window.onscroll = myScroll;
    var counter = 0; // Global Variable
    function myScroll(){
       var val = document.getElementById("value");
       val.innerHTML = 'pageYOffset = ' + window.pageYOffset;
       if(counter == 0){ // if counter is 1, it will not execute
         if(window.pageYOffset > 300){
            alert('You have scrolled to second div');
            counter++; // increment the counter by 1, new value = 1
         }
       }
      }
    #wrapper,#tester {
       width: 300px;
      height: 300px;
      border: 1px solid black;
      padding: 10px;
      }
    #wrapper p {
      text-align: center;
      }
    #tester {
      border: 1px solid crimson;
      }
    #value {
       position: fixed;
      left: auto;
      right: 40px;
      top: 10px;
      }
    <p id = "value"></p>
    <div id="wrapper">
        <p>scroll down to div to see the alert</p>
    </div>
    <div id="tester"></div>

    0 讨论(0)
  • 2021-01-02 00:16

    Try using .one():

    $(window).one('scroll',function() {
       // Stuff
    });
    

    Or, unlink the event inside:

    $(window).on('scroll',function() {
       // After Stuff
       $(window).off('scroll');
    });
    

    Guess you might need this code:

    $(window).on('scroll',function() {
        if (checkVisible($('#tester'))) {
            alert("Visible!!!");
            $(window).off('scroll');
        } else {
            // do nothing
        }
    });
    

    Fiddle: http://jsfiddle.net/c68nz3q6/

    0 讨论(0)
提交回复
热议问题