Как определить, какие элементы видны в переполнении <div> - PullRequest
Новая
       1

Как определить, какие элементы видны в переполнении <div>

6 голосов
/ 05 января 2011

По сути, я пытаюсь реализовать систему, которая ведет себя подобно панели чтения, встроенной в интерфейс Google Reader.

Если вы ее еще не видели, Google Reader представляет каждую статью в отдельной статье.и когда вы прокручиваете, он выделяет текущее поле (и помечает статью как прочитанную).В дополнение к этому вы можете перемещаться вперед или назад в списке статей, нажимая кнопки «предыдущий» и «следующий» в пользовательском интерфейсе.

Я в основном выяснил, как выполнять большинство функций.Тем не менее, я не уверен, как я могу определить, какие из моих div в настоящее время видны в прокручиваемой панели.

У меня есть div, который настроен на переполнение: авто.Внутри этого div есть другие div, каждый из которых содержит часть содержимого.Я использовал следующий плагин jquery, чтобы прокручивать все на основе нажатия кнопки «следующий» или «предыдущий», и он работает как шарм:

http://demos.flesler.com/jquery/serialScroll/

Но яне могу сказать, какой div имеет «фокус» на прокручиваемой панели.Я хотел бы иметь возможность сделать это по двум причинам.

  1. Я хотел бы выделить элемент, который в данный момент читает пользователь (аналог Google Reader).Мне нужно делать это независимо от того, использовали ли они плагин для доступа или использовали полосу прокрутки браузера.

  2. Мне нужно иметь возможность сообщить плагину, какой элемент имеет фокус, чтобы мой вызов для перехода к «следующей» панели фактически использовал текущую просматриваемую панель (а не только предыдущую панель).что плагин прокручивается с).

Я попытался выполнить поиск, но, похоже, не могу найти способ сделать это.Я нашел много способов прокрутки до определенного элемента, но не могу найти способ определить, какой элемент виден в переполненном элементе div.Если я могу определить, какие предметы видны, я могу (вероятно) выяснить остальное.

Я использую jquery, если это поможет.Спасибо!

Ответы [ 3 ]

13 голосов
/ 05 января 2011

Вы можете определить смещение каждого деления из верхней части прокручиваемой области, а затем сравнить его с величиной прокручиваемой области. 

$('#scrollableDiv').scroll(function() {
    var areaHeight = $(this).height();

    $('.innerDiv').each(function() {
        var top = $(this).position().top;
        var height = $(this).height();

        if (top + height < 0)
            console.log('this div is obfuscated above the viewable area');
        else if (top > areaHeight)
            console.log('this div is obfuscated below the viewable area')
        else
            console.log('this div is at least partially in view');
    });
});

Если в нем находится более одного divзатем я выбрал бы значение с наименьшим значением переменной offset, поскольку это будет первое (или наибольшее) значение.

2 голосов
/ 05 января 2011

Поскольку вы используете jquery, взгляните на функцию position () http://api.jquery.com/position/

. Вы можете использовать ее для проверки положения выбранного элемента относительно окружающего контейнера.

Пример 

<!DOCTYPE html>
<html>
<head>
  <style>

  div { height: 3px;
      overflow: auto;
      padding: 10px;}
  p { margin-left:10px; }
  </style>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>

<div id="container">
  <p>Hello</p>
</div>
<p></p>

<script>
$(document).ready(function(){
    $("#container").scroll(function(ev){
        var p = $("p:first");
        var position = p.position();
        $("p:last").text( "left: " + position.left + ", top: " + position.top );
    });
});
</script>

</body>
</html>

Если код выглядит знакомым, потому что большую часть его я украл со страницы .position:).

Вы можете увидеть его в действии здесь http://jsfiddle.net/ehudokai/HBhRL/5/, попробуйте прокрутить слово «Hello».

Вы можете использовать тот факт, что верхнее значение изменяется при перемещении элемента через родительский элемент, чтобы увидеть, близко ли оно к видимой части.

Надеюсьэто помогает!

0 голосов
/ 03 декабря 2011

Я использую плагин JQuery для этого .. он работает как по волшебству ..:) 

$(document).ready(function() {
    $('#wallbottom').appear(function() {
        alert("div appeared");
    });
});

code.google.com / p / jquery-emerge /

...