Question

我可以将滚动条一直强制向下，通过将其设置为底部的div来设置动画。我也知道如何动画回到顶部。

但如果我的代码能够捕捉到我通过动画到达底部的事实，那么它会自动开始重新启动。或者在按下之后，当到达末端时，它会上下无限循环。

或许我应该以完全不同的方式做到这一点？

  $("div").scroll(function(){
    if (emergency) return;
    $("span").text( x+= 1);
    if (!atTop() && !atBot()){
       animating = true;
       sayPos("mid");
       if (down)
           txtbx.animate({scrollTop: txtbot}, 10, animdone);
       else // up
           txtbx.animate({scrollTop: 0}, 10, animdone);
    } else if (atTop() && !animating) { 
        animating = true;
        sayPos("top");
        txtbx.animate({scrollTop: txtbot}, 10, animdone);
    } else if (atBot() && !animating) {
        animating = true;
        sayPos("bot");
        txtbx.animate({scrollTop: 0}, 10, animdone);
    } else { // animation end: atEnd but was animating
        ended = true; //animating = false;
        sayPos("endAnim ----------------");
    }
});

和

function animdone(){ 
    scrlpos = txtbx.scrollTop();
    if(ended){
         if (down && scrlpos > 0)
            txtbot = scrlpos;
         ended = false;
         //animating = false;
         down = !down;
         sayPos("..ended");
     }
     else sayPos("..callback"); 
 }

function atBot(){ return scrlpos >= txtbot;  }
function atTop(){ return scrlpos == 0; }

Here's my fiddle

Answer 1

好的，我在JQuery中找到了一种简单的方法，使用myelem.scrollTop(target)并在文本的末尾放置一个div。

myElement.scroll( ... - 抓住事件然后
myElement.scrollTop(0) - 用于滚动到元素的顶部
window.scrollTop(txtBottom) - 用于滚动到底部，其中txtBottom是文本末尾的div元素。

使用scrollTop( somevalue )我只获得一个额外的滚动事件，而不是创建多个均匀的动画。

我们捕获的第一个滚动事件是由用户单击滚动条引起的，第二个事件是由强制滚动一直到元素顶部或底部的代码引起的。

如果要捕获整个窗口的滚动事件（意味着浏览器），则将div放在文本的底部并使用

$(window).scroll( ... - 抓住事件然后
window.scrollTo(0,0) - 滚动到窗口顶部
window.scrollTo(0,txtBottom) - 用于滚动到底部，其中txtBottom是文本末尾的div元素。

我抓住用户在滚动条上按下时产生的第一个iteratin，并将其全部推入。我根据最后一个滚动位置决定按哪种方式推送。如果它为零，则它上升并且顶部，并且需要最后到达div。否则它会回到顶部的零点。

然后我忽略了.scroll的第二次迭代，这是由我的代码将滚动条推到其末尾引起的。

var isSecondScroll = false;
var lastScroll = 0;
myElem = $("#myelem"); // my scrolling element
// or: myElem = $(window);
txtBottom = $("#myelembottom").offset().top;  // dev at end of text
myElem.scroll(function(){
    if ( !isSecondScroll )
       isSecondScroll = false;
    else { // first iteration
        if (lastScroll == 0) // top
            myElem.scrollTop(txtBottom); 
            // or: myElem.scrollTo(0,txtBottom); // for scrolling full browser window

         else // not top
            myElem.scrollTop(0);
            // or: myElem.scrollTo(0,0); // for scrolling full browser window

    }

    isSecondScroll = true;  // mark for next iteration
    lastScroll = myElem.scrollTop();

}); // .scroll()

HTML看起来像这样

<div id="myelem" 
     style="width:200px; height:100px; overflow:scroll;" >
here comes long text more than the 100px high
<div id="myelembottom"></div>
</div>

Here's a working corrected fiddle 这是一个有效的纠正小提琴（代码更清晰）for scrolling the whole browser window。

如何将滚动条切换为全向或全向

1 个答案: