查找滾動div的底部高度？

我們有一個div，我需要找到它的最大滾動高度大小。我聊天，目前，有12級的消息，有800像素高，但是當我使用此代碼：查找滾動div的底部高度？

var trueDivHeight = $('#chat')[0].scrollHeight;

它只會找出DIV，而不是整個滾動向下的高度，它會說490px 。但我想找到最大高度，到底部。

從上到下滾動。

爲什麼我需要這個？由我來解決這個獎金的問題：AJAX Chat - Automatically drag the scroll down, but don't drag it when the user is scrolling up?

基本上我所能做的就是，當發送消息時，請檢查：

if (checkScroll(trueDivHeight)) { //Runs the function checkScroll with max div height. 
    scrollDown = true; // turn true if it was true. 
} 

if (scrollDown) { 
    setInterval(function() { 
     scrollToBottom(); // scroll to bottom 1 second after posted message.. 
    }, 1000); 
}

和功能，我可以使用：

function scrollToBottom() { 
    $('#chat').scrollTop(bottom); // Makes scroll go to the most bottom. 
} 

function checkScroll(size) { 
    if ($("#chat").scrollTop() == size) { // Checks if current scroll position equals to the max bottom position. 
     return true; // if yes, return true. 
    } 
}

但問題是，trueDivHeight並沒有從上到下找到卷軸的整個高度。如果是這樣，那麼它會對我有用。

任何想法？

編輯：

var trueDivHeight = $('#chat')[0].scrollHeight; // finds the max bottom px 
var divHeight = $('#chat').height(); 
var bottom = $('#chat')[0].scrollHeight;

來源

2013-06-27 Jony Kale

如果你只是用一個荒謬的大量？我相信瀏覽器實際上不會超出其界限。 – ArrayKnight

看看我是怎麼做的滾動在我的聊天：https://github.com/mondjunge/Crush-Framework/blob/master/javascript/chat/main.js

我得到當前scrollHeight屬性我獲取數據之前。獲取潛在的新消息後，我檢查scrollHeight是否變大，只有滾動到底部，如果是。這樣，只要沒有新消息彈出，用戶就能夠滾動。

下面是代碼：

function getData() { 
var oldscrollHeight = $("#chatWindow").attr("scrollHeight") - 20; 
var room = $("#chatRoom").val(); 
var chatUrl = "?m=load&room="+room; 

if(!firstRun){ 
    //alert("something"); 
    chatUrl = "?m=idle&room="+room; 
}  

$.ajax({ 
    type: "POST", 
    url: chatUrl, 
    async: true, 
    timeout: 30000, 
    data: "get=true", 
    success: function(html){ 
     var htmlArr = html.split('<!--USERLIST-->'); 
     //alert(htmlArr[1]); 
     $("#userList").html(htmlArr[1]); 
     if(firstRun){ 

      $("#chatWindow").html(htmlArr[0]); 
      firstRun = false; 
     }else{ 
      $("#chatWindow").append(htmlArr[0]); 
     // alert('idle'); 
     } 

     //$("#chatWindow").html(html); 
     //Insert chat log into the #chatbox div    
     var newscrollHeight = $("#chatWindow").attr("scrollHeight") - 20; 
     if(newscrollHeight > oldscrollHeight){ 
      $("#chatWindow").animate({ 
       scrollTop: newscrollHeight 
      }, 'normal'); //Autoscroll to bottom of div 
     } 

     setTimeout("getData()", 1000); 

    } 
});

我希望我理解你的問題。我相信這並不能真正回答這個問題，但如果每次獲取數據時都滾動，我相信您的實現方式是錯誤的。保持觸發事件儘可能少。

來源

2013-06-27 21:26:06 mondjunge

如果你能解釋更多，會更好，並且發佈那些在那裏滾動的特定代碼會有很大幫助。謝謝。 –

嘿，隊友，感謝您的編輯。但它似乎不適合我。 http://pastebin.com/f0Qvh8Ug我做得對嗎？ –

我沒有看到任何插入#chat div中的新數據獲取滾動高度。在獲取新消息之前，您需要獲取滾動高度，並在將它們插入聊天分區後檢查並滾動。 – mondjunge

我颳起了基於我以前的評論了一點東西：http://jsfiddle.net/9pZ6F/2/

var $container = $('#container'), 
    $content = $('#content'), 
    $line = $('.line').clone(), 
    userScrolling = false; 

function setScrollTop(val) { 
    $container 
     .off('scroll') 
     .one('scroll', function() 
      { 
       $container.on('scroll', userScroll); 
      }) 
     .scrollTop(val); 
} 

function scrollToNewLine() { 
    if(!userScrolling) { 
     setScrollTop(99999999999); 
    } 
} 

/* Add new lines randomly */ 
function addNewLine() { 
    var newLineTiming = Math.round(Math.random() * 3000); 

    setTimeout(function() { 
     $content.append($line.clone()); 

     scrollToNewLine(); 

     addNewLine();   
    }, newLineTiming); 
} 

addNewLine(); 

function userScroll() { 
    userScrolling = true; 

    var scrollTop = $container.scrollTop(); 

    setScrollTop(scrollTop + 1); 

    if(scrollTop == $container.scrollTop()) { 
     userScrolling = false; 
    } 
} 

$container.on('scroll', userScroll); 

$('button').on('click', function() 
{ 
    userScrolling = false; 
});

來源

2013-06-27 22:10:23 ArrayKnight

但它不應該只是點擊。如果用戶的滾動位於底部，它總是應該放下。如果不是，它不會向下滾動。 –

已更新。如果用戶滾動到底部，它現在恢復自動滾動。 – ArrayKnight

我的解決方案類似於Mondjudge，但不同在幾個方面。

我需要滾動的當前位置，而不是整個！

我重裝：

function reload() { 
    var oldscrollHeight = ($("#chat").scrollTop() + 470); 
    console.log(" old: " + oldscrollHeight); 
    $.post("ajax.php", { loadMessages : "1" }, function(data) { 
     $(".discussion").html(data); 
     var newscrollHeight = $("#chat").prop("scrollHeight"); 
     console.log(" new: " + newscrollHeight); 
     if(newscrollHeight < (oldscrollHeight + 150)) { 
      var height = $('#chat')[0].scrollHeight; 
      $('#chat').scrollTop(height); 
     }   
    });  
}

來源

2013-06-27 22:47:56

查找滾動div的底部高度？

回答

相關問題