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

我可以通过将动画设置为底部的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

来源

2016-09-21 pashute

OK，我发现一个简单的方法，在JQuery中，用myelem.scrollTop(target)并把一个div在文本的末尾。

myElement.scroll( ... - 赶上事件，然后
myElement.scrollTop(0) - 滚动到元素
window.scrollTop(txtBottom)的顶部 - 滚动至底部，其中txtBottom是一个div元素在最后的文字。

随着scrollTop(somevalue)我只得到一个额外的滚动事件，而不是创建多个evens的动画。

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

如果你想赶上整个窗口的滚动事件（指浏览器），你把格在文本的底部，使用

$(window).scroll( ... - 赶上事件然后
window.scrollTo(0,0) - 用于滚动到窗口
window.scrollTo(0,txtBottom)的顶部 - 用于滚动至底部，在那里txtBottom位于文本结尾div元素。

我捕捉到由用户按下滚动条引起的第一次迭代，并一路推送。根据最后一次滚动位置决定采用哪种方式。如果它的零点那么它就是最高点，最后需要下到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。

来源

2016-09-21 11:19:37 pashute

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

回答

相关问题