2014-05-28 3 views
0

Привет, пожалуйста, помогите мне с моей скрипкой HEREВыделите нижнюю часть сНу событий (переполнения)

Я это Диво

<div id='divdiv' style="height: 200px; overflow:scroll"> 
<span id='content'> 
    Scroll down!Scroll down! 
    Scroll down!Scroll down! 
    Scroll down!Scroll down! 
    Scroll down!Scroll down! 
    Scroll down!Scroll down! 
    Scroll down!Scroll down! 
</span> 
    <i id="selectedElement">s</i> 

</div> 

этого DIV имеет переполнение и я прокрутка события, которые запускают, когда <i id="selectedElement">s</i> видна в DIV

//function to check if target element is visible 
    function isElementVisible(elementToBeChecked) 
    { 
     var TopView = $('#divdiv').scrollTop(); 
     var BotView = TopView + $('#divdiv').height(); 
     var TopElement = $(elementToBeChecked).offset().top; 
     var BotElement = TopElement + $(elementToBeChecked).height(); 
     return ((BotElement <= BotView) && (TopElement >= TopView)); 
    } 


//scroll event 
$('#divdiv').scroll(function() { 
     isOnView = isElementVisible("#selectedElement"); 
     if(isOnView){ 
      $('#content').append('<br>a<br>a<br>a<br>a<br>a<br>a<br>a'); 

     }else{ // If not visible 

     } 
}); 

<i id="selectedElement">s</i> если виден я добавил некоторое значение '<br>a<br>a<br>a<br>a<br>a<br>a<br>a' просто чтобы проверить, если я достигну дна, но я не могу м ke это работает.

он должен функционировать как

, когда целевой элемент виден я буду загружать некоторое содержание, то пользователь будет прокручивать снова, чтобы дно и когда целевой элемент «снова» видимый я будет загружать еще некоторое содержание снова

+0

Что именно он должен делать? –

+0

@ICanHasKittenz, когда элемент цели виден, я загружу некоторый контент, тогда пользователь будет прокручивать назад донизу, и когда целевой элемент будет «снова» виден, я снова загружу еще некоторое содержимое. – CaffeineShots

+0

Размер div достаточно, чтобы включить все, что у вас есть. распечатаны. – Hariprasad

ответ

2

Я обновил скрипку here.
Это добавляет случайное число в div «content», как только оно достигает дна.

function appendContent() 
{ 
    if ($('#divdiv')[0].scrollHeight <= $('#divdiv')[0].scrollTop + $('#divdiv').height()) { 
     return true; 
    } 
    else 
     return false; 
} 

$('#divdiv').scroll(function() { 
    if(appendContent()){ 
     $('#content').append('<br>' + Math.random()); 
    }else{ // If not visible 

    } 
}); 
+0

спасибо за это сэр. большое спасибо спасибо спасибо! – CaffeineShots

+0

Я рад, что это помогло. – Rohith

0

Проверить это Demo Fiddle

Используйте этот

$('#divdiv').scrollTop($('#divdiv').prop("scrollHeight")); 

ИЛИ

$('#divdiv').scrollTop($('#divdiv')[0].scrollHeight); 

scrollTop() прокручивает дела до дна.

prop("scrollHeight") дает вашу фактическую высоту, а не по умолчанию высоты дисплея - height().

+0

хороший прогресс, спасибо, но когда я прокрутил еще один контент Загружается – CaffeineShots

+0

Содержимое загружено? Я ничего не нахожу. –

+0

этот номер '
a
a
a
a
a
a
a' действует как загруженный контент. спасибо – CaffeineShots

Смежные вопросы