Как получить реальную высоту прокрутки div (скажем, внутренний размер текста)

Question

Я пытаюсь сделать автоматический прокручиваемый div, который доходит до вершины, когда он достигнет конца. Но это не работает ...

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> 

И после того, мне нужно будет найти способ остановить прокрутку, когда "OnMouseOver" встречается,.

EDIT: Я не объяснил проблему четко. На самом деле, я пробовал что-то вроде:

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

Проблема в том, что scrollHeight кажется большим, чем внутренний текст div. Таким образом, уходит много времени, чтобы вернуться к вершине.

Поэтому мне нужно свойство element, из которого я мог бы использовать значение для сравнения с моей переменной count. Однако я не знаю Javascript много, и я ничего не мог найти. Надеюсь, это так же просто, как я думаю об этом.

Answer 1

Вы можете попробовать использовать свойство scrollHeight.

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

Answer 2

Решение у меня есть включает JQuery, надеюсь, что это не проблема.

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> 

Объяснение: JQuery-х .height() из внутреннего элемента <p> дает нам фактическую высоту, которую вы ищете, но это не достаточно для достижения внизу, так как это происходит до того, как мы достигнем высоты элемента. Небольшое исследование показывает, что «верх» scrollTop() примерно на полпути внутри исходной высоты div. Вам может понадобиться сыграть с divHeight, чтобы получить точные результаты, которые вы ищете.

Конечно, я также включил метод остановки и продолжения прокрутки.

Удачи вам!

Answer 3

Try:

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

Это должно делать то, что вам нужно.