Javascript-форум - Показать сообщение отдельно

Decode · #1 (**permalink**) 27.08.2015, 17:33

Помогите правильно составить условие. Если элементы подносят к вертикальным краям окна — оно должно прокручиваться вниз/вверх. Пытаюсь реализовать прокрутку вниз, но что-то работает не правильно.

При моем условии scrollBy — не останавливается.

var docElemBottom = getCoords(document.documentElement).bottom;

if(top > document.documentElement.clientHeight - elem.offsetHeight && (top < docElemBottom)) {
    scrollBy(0, 10);
    console.log([top, docElemBottom]);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
        html, body { margin: 0; padding: 0; }

        #field {
            background: url(https://js.cx/drag-heroes/field.png);
            width: 800px;
            height: 600px;
            float: left;
        }

        .hero {
            background: url(https://js.cx/drag-heroes/heroes.png);
            width: 130px;
            height: 128px;
            float: left;
        }

        #hero1 { background-position: 0 0; }
        #hero2 { background-position: 0 -128px; }
        #hero3 { background-position: -120px 0; }
        #hero4 { background-position: -125px -128px; }
        #hero5 { background-position: -248px -128px; }
        #hero6 { background-position: -244px 0; }

        .draggable { cursor: pointer; }
    </style>
</head>
<body>
    <h2>Расставьте супергероев по полю.</h2>

    <p>Супергерои и мяч -- это элементы с классом "draggable". Сделайте так, чтобы их можно было переносить.</p>
    <p>Важно: если супергероя подносят к низу или верху страницы, она должна автоматически прокручиваться. Если страница помещается на вашем экране целиком и не имеет вертикальной прокрутки -- сделайте окно браузера меньше, чтобы протестировать эту возможность.</p>
    <p>Да, и ещё: супергерои ни при каких условиях не должны попасть за край экрана.</p>

    <div id="field"></div>

    <div class="hero draggable" id="hero1"></div>
    <div class="hero draggable" id="hero2"></div>
    <div class="hero draggable" id="hero3"></div>
    <div class="hero draggable" id="hero4"></div>
    <div class="hero draggable" id="hero5"></div>
    <div class="hero draggable" id="hero6"></div>

    <img src="https://js.cx/drag-heroes/ball.png" class="draggable" />

    <div style="clear:both"></div>

    <script>
        var shiftX, shiftY;

        document.onmousedown = function(event) {
            var target = event.target;
            if( !target.classList.contains('draggable') ) return;

            shiftX = event.pageX - getCoords(target).left;
            shiftY = event.pageY - getCoords(target).top;

            target.style.cssFloat = 'none';
            target.style.position = 'absolute';

            moveAt(target, event);

            document.body.appendChild(target);

            document.onmousemove = function(event) {
                moveAt(target, event);
            };

            target.onmouseup = function() {
                document.onmousemove = this.onmouseup = null;
            };

            return false;

        };

        function moveAt(elem, event) {
            var left = event.pageX - shiftX,
                top = event.pageY - shiftY,
                rightEdge = document.documentElement.clientWidth - elem.offsetWidth;

            left < 0 && (left = 0);
            left > rightEdge && (left = rightEdge);

            var docElemBottom = getCoords(document.documentElement).bottom;

            if(top > document.documentElement.clientHeight - elem.offsetHeight && (top < docElemBottom)) {
                scrollBy(0, 10);
                console.log([top, docElemBottom]);
            }
            
            elem.style.left = left + 'px';
            elem.style.top = top + 'px';
        }

        function getCoords(elem) {
            var box = elem.getBoundingClientRect();

            return {
                top: box.top + pageYOffset,
                left: box.left + pageXOffset,
                bottom: box.bottom + pageYOffset
            };
        }
    </script>
</body>
</html>