Scroll Down (javascript)

Question

I create a scroll down who works with 2 buttons, one button to start and the other to stop. But if I press the start more times it won't stop. Also what I can do to stop when arrives in the end of the div/page?

HTML

<div data-role="main" class="ui-content">

    <!--εδώ γράφω-->
    <div class="btn-group" style="width:100%">
        <button onclick="start_scroll_down()" class="ui-btn ui-btn-inline ui-shadow" style="width:46%" style="position:fixed;">Start SD</button>
        <button onclick="stop_scroll_down()" class="ui-btn ui-btn-inline ui-shadow" style="width:46%" style="position:fixed;">Stop SD</button>
    </div>
    <div class="article">
        <center>
            <!--text-->
        </center>
    </div>
</div>

Javascript

function start_scroll_down() {
    scroll = setInterval(function() {
        window.scrollBy(0, 1);
        console.log('Ξεκίνα');
    }, 150);
}

function stop_scroll_down() {
    clearInterval(scroll);
    console.log('Σταμάτα');
}

Just call `stop_scroll_down()` in the first line of `start_scroll_down` — Washington Guedes, Jun 02 '17 at 18:39
in my opinion you need to track location, if a certain height is reached then the stop_scroll_down() is invoked. — J nui, Jun 02 '17 at 18:41
Try to use jquery.scrollTo plugin ,https://github.com/flesler/jquery.scrollTo — Saleh Mosleh, Jun 02 '17 at 19:02
Have a look at this: https://codepen.io/AquatuzMagnus/pen/OgJMeW — James Douglas, Jun 02 '17 at 19:27
Just out of interest, why are all the answers here downvoted? What exactly is wrong with them? — James Douglas, Jun 12 '17 at 18:16

Nick is tired · Accepted Answer · 2017-06-02T19:53:56.757

The problem is that every time you click you generate a new interval (and then lose all reference to the old one, making it impossible to clear later on, overwriting an interval does not stop it):

function start_scroll_down() { 
    scroll = setInterval(function(){
        window.scrollBy(0, 1); 
        console.log('Ξεκίνα');
    }, 150);
}

So instead of always generating an interval immediately, clear the existing one first, that way you won't have more than one:

function start_scroll_down() { 
    clearInterval(scroll);
    scroll = setInterval(function(){
        window.scrollBy(0, 1); 
        console.log('Ξεκίνα');
    }, 150);
}

As a side note, scroll is a function already defined within window (window.scroll(x, y), it scrolls to a specific location) and you should consider renaming your variable to something else to ensure you don't overwrite the original:

function start_scroll_down() { 
    if(myScroll){clearInterval(myScroll)};
    myScroll = setInterval(function(){
        window.scrollBy(0, 1);
        console.log('Ξεκίνα');
    }, 150);
}
function stop_scroll_down() {
    if(myScroll){clearInterval(myScroll)};
    console.log('Σταμάτα');
}

Note the if statement to protect the code from failing the first time it is run (i.e. when myScroll is undefined).

You can detect how far you have scrolled by comparing the current scroll distance to the total height of the page:

myScroll = 0;
function start_scroll_down() { 
    if(myScroll){clearInterval(myScroll)};
    myScroll = setInterval(function(){
        window.scrollBy(0, 1);
        console.log('Ξεκίνα');
        if(window.scrollY == document.body.offsetHeight-window.innerHeight){
            clearInterval(myScroll);
        }
    }, 150);
}

Note that here I have ensured that myScroll is already defined before setting the interval, otherwise clearInterval(myScroll); will throw an error.

score -1 · Answer 2 · answered Jun 02 '17 at 19:21

Stopping once at the bottom of the element

Lets adjust your scrolling function to check how far down we are before continuing. (using jquery, see this question)

function scrollPage() { 
  const scrolledHeight = $(window).scrollTop() + $(window).height();
  const atBottom =  scrolledHeight == $(document).height();
  if (atBottom) { stop_scroll_down(); }
  else { window.scrollBy(0, 1) }
}

Clicking button multiple times

You need to detect if you are already running the scroll function or not. This can be done as such:

let isScrolling = false;
let scrollInterval = null;

function start_scroll_down() { 
  if (isScrolling) { return; }
  scrolling = true;
  scrollInterval = setInterval(scrollPage, 150);
}

function stop_scroll_down() {
   clearInterval(scrollInterval);
   isScrolling = false;
   console.log('Σταμάτα');
}

Scroll Down (javascript)

2 Answers2

Stopping once at the bottom of the element

Clicking button multiple times