Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.10.2013, 23:41
Аспирант
Отправить личное сообщение для Zhazhah Посмотреть профиль Найти все сообщения от Zhazhah
 
Регистрация: 27.11.2010
Сообщений: 48

Определить ближайший верхний элемент в окне
Здравствуйте, есть html блоки

<div id="1" style="height:700px;border:1px solid"></div>
<div id="2" style="height:500px;border:1px solid"></div>
<div id="3" style="height:300px;border:1px solid"></div>
<div id="4" style="height:600px;border:1px solid"></div>


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

Может быть для этого нет необходимости определять видимый блок на странице?
Ответить с цитированием
  #2 (permalink)  
Старый 13.10.2013, 02:25
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Zhazhah
Может быть для этого нет необходимости определять видимый блок на странице?
Зависит от задачи. Что если мы переместились стрелочкой ко второму блоку, затем прокрутили колесиком к третьему. При следующем нажатии на стрелку к какому блоку переместиться должны? И причем тут jQuery вобще?
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 13.10.2013, 09:53
Аспирант
Отправить личное сообщение для Zhazhah Посмотреть профиль Найти все сообщения от Zhazhah
 
Регистрация: 27.11.2010
Сообщений: 48

Цитата:
затем прокрутили колесиком к третьему. При следующем нажатии на стрелку к какому блоку переместиться должны?
К ближайшим блокам, то есть, если мы на третем блоке нажимаем стрелочку вниз перемещаемся к 4-му, вверх то ко 2-му. А jquery просто плагин использую scrollTo 1kb весит но полезный.
Ответить с цитированием
  #4 (permalink)  
Старый 13.10.2013, 11:09
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Тогда возможно тебе поможет document.elementFromPoint(x, y) и Element.prototype.getBoundingClientRect()
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #5 (permalink)  
Старый 13.10.2013, 18:55
Аспирант
Отправить личное сообщение для Zhazhah Посмотреть профиль Найти все сообщения от Zhazhah
 
Регистрация: 27.11.2010
Сообщений: 48

Вот кое что слепил, работает, но сколько же итераций в холостую происходит это ужас, может кто поможет?
$(document).ready(function() {
        var result;
        
        $(document).scroll(function() {
            result = scrolList('div');
        });
        
        $(document).keydown(function(eventObject) {
            if(eventObject.which == 87) { //w
                $('html,body').scrollTo(result.id, $(result).prev())
            }
            else if(eventObject.which == 83) { //s
                $('html,body').scrollTo(result.id, $(result).next());
            } 
        });
});

function scrolList(s){
        var scrollTop = $(window).scrollTop();
        var currentEls = $(s);
        var result;
        
        
        currentEls.each(function(){
            var offset = $(this).offset();
            $('#resl').prepend((scrollTop) +'>'+ (offset.top )+'<br>');
            if((scrollTop+70) > (offset.top)) {
                result = $(this);
            }
                
        });
        
        return $(result);
}

Последний раз редактировалось Zhazhah, 13.10.2013 в 18:57.
Ответить с цитированием
  #6 (permalink)  
Старый 13.10.2013, 19:07
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от Zhazhah
$('#resl').prepend((scrollTop) +'>'+ (offset.top )+'<br>');
Что тут происходит?
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #7 (permalink)  
Старый 13.10.2013, 21:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,905

Zhazhah,
Вариант ... скролл к ближайшему s - вниз, w - вверх - кликнуть по документу 1 раз в начале
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  div{width:100%}
  #d1{background:#00F;height:700px;border:1px solid}
  #d2{background:#FF0;height:500px;border:1px solid}
  #d3{background:#F0F;height:300px;border:1px solid}
  #d4{background:#F00;height:600px;border:1px solid}
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
    $(document).ready(function () {
        var b = [];
        $("div").each(function (c, d) {
                b[c] = [$(d).offset().top, $(d).height()]
            });
        $(document)
            .keyup(function (c) {
                if (87 == c.which || 83 == c.which) {
                    for (var d = $(document).scrollTop(), a = 0; a < b.length && !(b[a][0] + b[a][1] > d); a++);
                    a = 83 == c.which ? ++a : --a;
                    0 > a && (a = 0);
                    a >= b.length && (a = b.length - 1);
                    $("body,html").animate({scrollTop: b[a][0]}, 400);
                    return !1
                }
            })
        });
  </script>
</head>
<body>
<div id="d1" >1</div>
<div id="d2" >2</div>
<div id="d3" >3</div>
<div id="d4" >4</div>
</body>
</html>
Ответить с цитированием
  #8 (permalink)  
Старый 13.10.2013, 23:38
Аспирант
Отправить личное сообщение для Zhazhah Посмотреть профиль Найти все сообщения от Zhazhah
 
Регистрация: 27.11.2010
Сообщений: 48

Шиикарно

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

Последний раз редактировалось Zhazhah, 14.10.2013 в 10:14.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Определить элемент при scroll Zhazhah jQuery 1 16.03.2013 18:29
Как определить пользователь сам нажал элемент или при помощи функции click(); finlandia Элементы интерфейса 13 10.01.2013 21:09
Как определить, когда дочерний элемент обрезается overflow: hidden? Sprinter Элементы интерфейса 2 10.05.2012 09:41
определить элемент на котором щелчок warobushek Events/DOM/Window 3 13.06.2010 11:04
Не могу определить элемент AlexMak Общие вопросы Javascript 23 21.01.2009 16:50