javascript - 向下滚动 (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 = 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);
}

请注意，这里我已确保 myScroll 在设置间隔之前已经定义，否则 clearInterval(myScroll); 将抛出错误.