Форум

Zhazhah · #1 (**permalink**) 13.10.2013, 00:41

Здравствуйте, есть 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 с помощью клавиатуры стрелки вверх и вниз, т.е как бы я не перемещался на странице вверх или вниз, нажав стрелочки я должен перемещаться к следующему или предыдущему блоку...

Может быть для этого нет необходимости определять видимый блок на странице?

danik.js · #2 (**permalink**) 13.10.2013, 03:25

Сообщение от Zhazhah

Может быть для этого нет необходимости определять видимый блок на странице?

Зависит от задачи. Что если мы переместились стрелочкой ко второму блоку, затем прокрутили колесиком к третьему. При следующем нажатии на стрелку к какому блоку переместиться должны? И причем тут jQuery вобще?

Zhazhah · #3 (**permalink**) 13.10.2013, 10:53

Цитата:

затем прокрутили колесиком к третьему. При следующем нажатии на стрелку к какому блоку переместиться должны?

К ближайшим блокам, то есть, если мы на третем блоке нажимаем стрелочку вниз перемещаемся к 4-му, вверх то ко 2-му. А jquery просто плагин использую scrollTo 1kb весит но полезный.

danik.js · #4 (**permalink**) 13.10.2013, 12:09

Тогда возможно тебе поможет document.elementFromPoint(x, y) и Element.prototype.getBoundingClientRect()

Zhazhah · #5 (**permalink**) 13.10.2013, 19:55

Вот кое что слепил, работает, но сколько же итераций в холостую происходит это ужас, может кто поможет?

$(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);
}

danik.js · #6 (**permalink**) 13.10.2013, 20:07

Сообщение от Zhazhah

$('#resl').prepend((scrollTop) +'>'+ (offset.top )+'<br>');

Что тут происходит?

рони · #7 (**permalink**) 13.10.2013, 22:18

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>

Zhazhah · #8 (**permalink**) 14.10.2013, 00:38

Шиикарно

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

Форум

Справочник

Discord чат

Курсы javascript