Cách lấy chiều cao cuộn thực của div (nói kích thước văn bản bên trong)

Question

Tôi đang cố tạo một div cuộn tự động chuyển đến phần đầu của nó khi nó đến cuối. Nhưng nó không hoạt động ...

function scrollPannel() 
{ 
    var pannel = document.getElementById('pannel'); 
    if (typeof scrollPannel.count == 'undefined') 
    { 
     scrollPannel.count = 0; 
    } 
    else 
    { 
     scrollPannel.count += 2; 
    } 
// trouble is here 
    if ((scrollPannel.count - pannel.scrollHeight) > pannel.clientHeight) 
    { 
     scrollPannel.count = 0; 
    } 
    pannel.scrollTop = scrollPannel.count; 
    setTimeout('scrollPannel()', 500); 
} 

HTML:

<div id='pannel' style="height:200px;overflow:auto" onmouseover="sleepScroll()"> 
    <p>...</p><!-- long text --> 
</div> 

Và sau đó, tôi sẽ cần phải tìm cách để ngăn chặn di chuyển khi "onmouseover" occures.

EDIT: Tôi không giải thích rõ vấn đề. Trong thực tế, tôi đã thử một cái gì đó như:

if (scrollPannel.count > pannel.scrollHeight) 
{ 
    scrollPannel.count = 0; 
} 

Vấn đề là scrollHeight có vẻ lớn hơn div bên trong văn bản. Vì vậy, nó làm cho rất nhiều thời gian để trở về đầu trang.

Vì vậy, tôi cần một thuộc tính phần tử mà tôi có thể sử dụng giá trị để so sánh với biến số của tôi. Tuy nhiên tôi không biết Javascript rất nhiều và tôi không thể tìm thấy bất cứ điều gì. Tôi hy vọng nó cũng đơn giản như tôi nghĩ về nó.

Answer 1

Bạn có thể thử sử dụng thuộc tính scrollHeight.

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollHeight

Answer 2

Các giải pháp tôi có liên quan đến jQuery, hy vọng đó không phải là một vấn đề.

JavaScript:

var timeout; 
function scrollPannel() 
{ 
    var divHeight = $("#pannel").height()/2; 
    var scrollCount = $("#pannel").scrollTop(); 
    var scrollHeight = $("#inside").height() - 20 - divHeight; 
    scrollCount += 2; 

    if ((scrollCount - scrollHeight) > 0) 
    { 
     scrollCount = 0; 
    } 
    $("#pannel").scrollTop(scrollCount); 
    timeout = window.setTimeout(scrollPannel(), 100); 
} 

function scrollStop() { 
    window.clearTimeout(timeout); 
} 

HTML:

<div id='pannel' onmouseover="scrollStop();" onmouseout="scrollPannel();"> 
    <p id="inside"></p><!-- long text --> 
</div> 

Giải thích: jQuery .height() của phần tử bên trong <p> cho chúng ta chiều cao thực tế bạn đang tìm kiếm, nhưng nó không đủ để đạt được các dưới cùng, vì điều đó xảy ra trước khi chúng ta đạt đến chiều cao của phần tử. Một cuộc điều tra nhỏ cho thấy "đỉnh" của scrollTop() là khoảng một nửa chiều cao bên trong chiều cao ban đầu của div. Bạn có thể cần phải chơi xung quanh với divHeight để có được kết quả chính xác mà bạn đang tìm kiếm.

Tất nhiên, tôi cũng bao gồm một phương pháp để dừng và tiếp tục cuộn.

Chúc may mắn!

Answer 3

Hãy thử:

// calculate max scroll top position (go back to top once reached) 
var maxScrollPosition = element.scrollHeight - element.clientHeight; 
// example 
element.scrollTop = maxScrollPosition; 

Điều đó sẽ làm những gì bạn cần.