Question

Here's my code :

if ($('document').scrollTop() < 0) {
  //Automatic Scroll
  setTimeout(function () {
    $('html, body').animate({
      scrollTop: $('.main-header').offset().top - 0
    }, 1800, 'easeInOutQuad');
  },8000);
}

If a user does not scroll, the page scrolls automatically to a certain div.

But I don't know how to trigger when a user do not scroll.

Thanks for your help !

Answer 1

To detect if a user hasn't scrolled, what I would do is set up a hasScrolled variable.

var hasScrolled = false;

Then change that variable to 'true' if the user scrolls:

document.addEventListener("scroll", function(){ hasScrolled = true; });

Then do your setTimeout to see if, in 8 seconds, the user has scrolled, and if not, do your thing:

setTimeout(triggerScroll,8000);

And in your triggerScroll function, the first line could be if (hasScrolled) return so that it doesn't run if they've scrolled

https://jsfiddle.net/eergdw3v/

Answer 2

try this

document.body.scrollTop === 0

Answer 3

You need to create a timer at the scroll event using setTimeout

function setUnscrollEvent( scrollTimeout, callback )
{
    $( window).scroll(function() {       
       if ( window.scrollTimer )
       {
          clearTimeout( window.scrollTimer ); //if the scroll has already started then clear the timeout
       }
       window.scrollTimer = setTimeout( function(){
          callback(); //invoke the callback in case scroll has been idle for srollTimeout ms
       }, scrollTimeout ); 
    });
}

You need to invoke it this way

setUnscrollEvent( 100, function(){
   console.log( "no scrolling for 100ms" );
});

DEMO

 function setUnscrollEvent( scrollTimeout, callback )
    {
        $( window).scroll(function() {       
           if ( window.scrollTimer )
           {
              clearTimeout( window.scrollTimer ); //if the scroll has already started then clear the timeout
           }
           window.scrollTimer = setTimeout( function(){
              callback(); //invoke the callback in case scroll has been idle for srollTimeout ms
           }, scrollTimeout ); 
        });
    }


    setUnscrollEvent( 100, function(){
       console.log( "no scrolling for 100ms" );
    });

.container
{
  width: 1000px;
  height: 1000px;
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
</div>

Answer 4

let scrollHandler = function(e) {
    //do your stuff

}
$(window).on("scroll",scrollHandler);

That will detect scrolling for you, to answer the question in your title. I don't follow what you're trying to say under your code though

Answer 5

Export your function, so that you can call it when you want :

if ($('document').scrollTop() < 0) {

  //Automatic Scroll
  setTimeout(triggerScroll,8000);
}

function triggerScroll() {
  $('html, body').animate({
    scrollTop: $('.main-header').offset().top - 0
  }, 1800, 'easeInOutQuad');
}

// Manual trigger :
triggerScroll();

Detect if user begin to scroll jQuery

5 个答案: