Disable running javascript when scrolling from computer and phone

Question

This script automatically scrolls to the bottom of the page

1- How do I scroll to a specific {Div} in the middle of the page only and auto scroll gets disabled

2- If the user scrolls down from the computer or phone manually, the automatic descent will be disabled

function scrollpage() {     
    function f() 
    {
        window.scrollTo(0,i);
        if(status==0) {
            i=i+0.1;
            if(i>=Height){  status=1; } 
        } else {
        }
    setTimeout( f, 0.5 );
    }f();
}
var Height=document.documentElement.scrollHeight;
var i=1,j=Height,status=0;
scrollpage();

The Bomb Squad · Answer

You can add an event listener to do another action when the user emits a scroll event

I did a little bit of other stuff to make it scroll slowly when a user isn't scrolling and then stop when a user is scrolling

I only tested it on my laptop so far, feel free to test it out on other devices

function scrollpage() {     
    function f() 
    {
        if(STATUS===0) {
            expectedPos=window.scrollY+1
            window.scrollTo(0,expectedPos);
        }
    }
    setInterval(f,80) //calls f every 80ms
}
var STATUS=0; //status is already a global variable on some browsers
var expectedPos=null; //will be expected position of the interval's scroll.. any other scroll is from human most likely
scrollpage();

let timeout=null; //will be a timeout for waiting for scroll INACTIVITY
function inactive(){  STATUS=0;  }
window.addEventListener('scroll',function(e){
    if(expectedPos!==window.scrollY){  STATUS=1;  }
    clearTimeout(timeout);
    timeout=setTimeout(inactive,5000)
})

Aliza · Answer

With this you can customize the scrolling speed and choose the element to which you want to scroll to; any mousewheel event will automatically disable the autoscrolling.

let isAutoscrolling = false;
let isScrolling = false;
let scrollPage;


function autoScroll(scroll) {
  window.scrollTo(0, scroll.amount);

  if (scroll.target === window) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
      disableAutoScroll();
    }
  }
  if (scroll.target.tagName) {
    if (window.scrollY >= scroll.target.offsetTop) {
      disableAutoScroll();
    }
  } else {
    throw ("invalid scroll target")
    disableAutoScroll();
  }

  scroll.amount += scroll.speed;
}

function enableAutoScroll() {
  if (isScrolling) return;

  isAutoscrolling = true;
  scrollPage = setInterval(autoScroll, 16, {
    amount: 0,
    speed: 0.5,
    target: document.getElementById("scrollTarget")
  });
}

function disableAutoScroll() {
  if (!isScrolling) isScrolling = true;

  if (isAutoscrolling) {
    isAutoscrolling = false;
    clearInterval(scrollPage)
  }

}

function initializeAutoScroll() {
  //Autoscroll immediately
  //enableAutoScroll();

  //Autoscroll after 1 second
  setTimeout(enableAutoScroll, 1000);

  //Autoscroll after loading the page content
  //window.addEventListener("DOMContentLoaded", enableAutoScroll);

  document.body.addEventListener('wheel', disableAutoScroll);
  document.body.addEventListener('touchmove', disableAutoScroll);
}

initializeAutoScroll();

Aliza · Answer

I created a second version of the autoscrolling function that can be called directly without any initializer, I think its more flexible than the first version

let autoscrollAnimation;
let isAutoscrolling = false;
let isScrolling = false;

function animateAutoScroll(scroll) {
  window.scrollTo(0, scroll.amount);

  if (scroll.target === window) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
      disableAutoScroll();
      return;
    }
  } else if (scroll.target.tagName) {
    if (scroll.speed > 0 && window.scrollY >= scroll.target.offsetTop) {
      disableAutoScroll();
      return;
    }
    if (scroll.speed < 0 && window.scrollY <= scroll.target.offsetTop) {
      disableAutoScroll();
      return;
    }
  } else {
    disableAutoScroll();
    throw ("invalid scroll target");
    return;
  }

  scroll.amount += scroll.speed;
}

function disableAutoScroll() {
  if (!isScrolling) isScrolling = true;

  if (isAutoscrolling) {
    isAutoscrolling = false;
    clearInterval(autoscrollAnimation)
  }
}

function AutoScroll(from_position = 0, to_element = window, scroll_speed = 0.5, scroll_delay = 0) {
  document.body.addEventListener('wheel', disableAutoScroll);
  document.body.addEventListener('touchmove', disableAutoScroll);
  from_position = Math.max(0, Math.min(from_position, document.body.offsetHeight - window.innerHeight))

  if (to_element.tagName && from_position > to_element.offsetTop) {
    scroll_speed *= -1;
  }

  setTimeout(function() {
    if (isScrolling) return;
    isAutoscrolling = true;

    autoscrollAnimation = setInterval(animateAutoScroll, 16, {
      amount: from_position,
      speed: scroll_speed,
      target: to_element
    });
  }, scroll_delay);

}

AutoScroll(
  0, /*Starting position of autoscrolling*/
  document.getElementById("scrollTarget"), /*Ending position of autoscrolling */
  1, /*Autoscrolling speed*/
  1000 /*Autoscrolling delay*/
)

Disable running javascript when scrolling from computer and phone

3 Answers