Scrollen Sie nach unten (Javascript)

Question

Ich erstellen eine Bildlauf nach unten, die mit 2 Tasten funktioniert, eine Taste zum Starten und die andere zu stoppen. Aber wenn ich den Start öfter drücke, hört es nicht auf. Auch was kann ich tun, um zu stoppen, wenn am Ende der div/Seite ankommt?

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('Σταμάτα'); 
} 

Answer 1

Das Problem ist, dass Sie jedes Mal, klicken Sie ein neues Intervall generieren (und dann alle Verweise auf die alte verlieren, was es unmöglich macht später zu löschen auf, ein Intervall überschreiben stoppt es nicht):

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

Anstatt also immer ein Intervall sofort zu erzeugen, löschen Sie die bestehenden ersten, auf diese Weise werden Sie nicht mehr als eine haben:

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

Als Randbemerkung, scroll ist eine Funktion bereits innerhalb window (window.scroll(x, y) definiert , rollt sie zu einer bestimmten Stelle), und Sie sollten die Umbenennung Ihre Variable auf etwas anderes man bedenkt, um sicherzustellen, das Original nicht überschreiben:

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('Σταμάτα'); 
} 

Hinweis die if Anweisung Code andernfalls das erste Mal, um sie zu schützen ist run (dh . wenn myScroll nicht definiert ist).

können Sie erkennen, wie weit man durch einen Vergleich der aktuellen Scroll-Abstand auf die Gesamthöhe der Seite geblättert haben:

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); 
} 

Bitte beachte, dass ich hier dafür gesorgt haben, dass myScroll bereits vor definiert ist das Intervall einstellen sonst wird clearInterval(myScroll); einen Fehler ausgeben.

Answer 2

Stoppen einmal am unteren Rand des Elements

Lässt Ihre Scroll-Funktion einstellen zu prüfen, wie weit sind wir, bevor Sie fortfahren. (Mit Jquery, siehe 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) } 
} 

Ein Klick Taste mehrmals

Sie müssen erkennen, wenn Sie bereits über die Scroll-Funktion ausgeführt werden oder nicht. Dies kann als solche durchgeführt werden:

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('Σταμάτα'); 
}