在元素底部停止一次

Question

我创建了一个向下滚动，使用2个按钮，一个按钮启动，另一个按钮停止。但是，如果我多次按下开始，它就不会停止。还有什么我可以做到在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('Σταμάτα');
}

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

请注意，在此确定{<1}}已在设置间隔之前已定义，否则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('Σταμάτα');
}

向下滚动（javascript）

2 个答案:

在元素底部停止一次

多次单击按钮