向下滚动（javascript）

Question

我创建了一个向下滚动的人，他使用2个按钮，一个按钮启动，另一个按钮停止。但如果我多次按下开始，它不会停止。另外我能做些什么来阻止当到达div /页面的结尾？

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

的问题是，每次你点击你生成一个新的区间（再失去所有参考旧的，因此无法在以后结算覆盖间隔不会使其停止）：

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

因此，而不是总是立即产生间隔，首先清除现有的一个，这样你就不会有不止一个：

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

作为一个方面说明，scroll是内window已定义的函数（window.scroll(x, y) ，它滚动到特定的位置），你应该考虑重新命名变量别的东西，以确保您不会覆盖原有的：

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

注意if声明，以保护代码失败的第一次是运行（即。当myScroll未定义时）。

您可以检测到你有多远当前滚动距离比较页面的总高度滚动：在这里我已经确保了myScroll是之前已经定义设置间隔

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

注，否则clearInterval(myScroll);会抛出一个错误。

Answer 2

在元素

的底部停一次让你调整滚动功能检查有多远，我们都下来，然后再继续。 （使用jQuery，见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) } 
} 

点击按钮多次

您需要检测，如果你已经在运行滚动功能与否。这是可以做到这样：

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