Авто бар последующей прокрутки в DIV

Question

В принципе, я создал своего рода Autolog который имеет прокручивать DIV с использованием кода CSS ниже

.myClass { 
position: relative; 
padding: 39px 14px 14px; 
margin-bottom: -1px; 
border: 1px solid #ddd; 
border-top-left-radius: 4px; 
border-top-right-radius: 4px; 
height: 200px; 
overflow: auto; 
} 

В основном, данные помещаются в этом Div динамически с помощью JQuery как показано ниже, который извлекается из внешнего источника

$.each(data.search, function (i, v) { 
     $('.myClass').append('my content here'); 
}); 

ДИВ это выглядит так просто, как это

<div class="myClass"> 

</div> 

Что я хочу, чтобы сделать div, так как содержимое становится overflow. Я хочу, чтобы полоса прокрутки сбоку автоматически прокручивалась вниз, чтобы следовать за AutoLog вместо того, чтобы вручную вручную прокручивать панель , Я уверен, что это может быть достигнуто через Javascript, но не знаете, как, если бы кто-нибудь мог указать мне в правильном направлении, это было бы здорово,

Answer 1

Недавно я сделал что-то подобное, где у меня была «консоль» (а Див) Я выполняется печать, и когда он переполняется, вы следовали его вниз. здесь была моей «Println» функция:

printLn: function(str, clss) { 
    con.print(str, clss); 
    $output.append('<br/>').animate({ scrollTop: $output.prop('scrollHeight') }, 1); 
}, 

scrollTop В основном обновление до новой scrollHeight, которые более или менее говорят «прокручивать, насколько высота прокрутки позволяет» так вы «палка» на дно.

EDIT

Для вашей ситуации делать что-то вроде:

$.each(data.search, function (i, v) { 
     $div = $('.myClass'); 
     $div.append('my content here').animate({ scrollTop: $div.prop('scrollHeight') }, 1); 
}); 

Это устанавливает scrollTop свойство вашего дел до максимума, поэтому он будет прокручиваться на дно.

Answer 2

Добавьте это в свой скрипт после добавления содержимого, и он должен работать. .

$(".myClass").animate({ 
    scrollTop: $(".myClass").scrollHeight 
}, 300); 

Answer 3

// Get the number of pixels scrolled 
var intElemScrollTop = element.scrollTop; 
intElemScrollTop is an integer corresponding to number of pixels that element's content has been scrolled upward. 

// Set the number of pixels scrolled 
element.scrollTop = intValue; 

проверить ссылку https://developer.mozilla.org/en-US/docs/DOM/element.scrollTop