2016-03-22 5 views
0

Привет, ребята У меня есть родительский div и несколько дочерних div. и у меня есть свиток, который можно перемещать вверх и вниз, чтобы просмотреть ребенка. Теперь я хочу знать, что есть способ, когда при прокрутке вниз или вверх, используя jquery, я вижу, какой дочерний div находится в фокусе. Есть ли способ сделать это. Если да, то скажите. Благодаряполучить дочерний div из родителя с помощью jquery

Вот пример

<div id="parent" style="overflow:scroll; height:200px"> 
    <div id="child1"> 
     <p> 
    some text 
    </p> 
    </div> 

    <div id="child2"> 
     <p> 
    some text 
    </p> 
    </div> 

    <div id="child3"> 
     <p> 
    some text 
    </p> 
    </div> 
</div> 

Теперь это становится как этот image. Теперь, когда я прокручиваю вниз, как я могу узнать, какой дочерний div находится в фокусе. Каждый раз, когда пользователь перемещает свиток, как я узнаю, какой div находится в фокусе.

$('#parent').scroll(function() { 
    //What shoult I write here to know which child div is in focus 
}); 
+1

ли вы на самом деле означает "в фокусе", или в настоящее время видны? Не то же самое. Элементом, который имеет «фокус», является тот, который будет принимать события клавиатуры. И что, если она прокручивается так, чтобы нижняя половина одной и верхней половины следующего была видимой? – nnnnnn

+0

@nnnnnn yes Я имею в виду в фокусе или в настоящее время видимый – garden

+0

@NewToJS Я попытался использовать функцию .focus, но это не работает для em – garden

ответ

0

Я использовал плагин под названием JQuery Visible в прошлом, чтобы достичь этого. Я не могу точно описать, что происходит в фоновом режиме, но вы можете настроить вызов, чтобы проверить, если ваш элемент в окне просмотра:

$('#element').visible() 

Я хотел бы отметить, что я не имею использовал плагин не менее 12 месяцев, поэтому поддержка может закончиться. https://www.customd.com/articles/13/checking-if-an-element-is-visible-on-screen-using-jquery

+0

нет ли другого вы можете знать, потому что у меня много дочерних div. Теперь, если бы я начал писать, это было бы много кода – garden

+1

@garden Назначить имя класса, а не 'ID'. – NewToJS

+0

Используя этот плагин, вы сможете объединять классы вместе, чтобы получить конкретных детей, или если вы ищете свой последний элемент в списке, это может быть что-то вроде: $ ('# parent div: last-child') –

0

Я не думаю, что есть простой способ сделать это. Я тем не менее найти эту полезную функцию на аналогичной должности:

function isScrolledIntoView(elem) 
{ 
    var $elem = $(elem); 
    var $window = $(window); 

    var docViewTop = $window.scrollTop(); 
    var docViewBottom = docViewTop + $window.height(); 

    var elemTop = $elem.offset().top; 
    var elemBottom = elemTop + $elem.height(); 

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
} 

он в основном проверяет элемент противопоставлен верхней части окна.

Чтобы добавить в вашем примере:

$('#parent').scroll(function() { 
      $(this).children().each(function(child) { 
       if(isScrolledIntoView(child)) { 
        //Do the thing 
       } 
      }); 
     }); 

Смотрите пост здесь: Check if element is visible after scrolling

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