如何將滾動條切換爲全向或全向下

我可以通過將動畫設置爲底部的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

如何將滾動條切換爲全向或全向下

回答

相關問題