Форум

trec · #1 (**permalink**) 15.10.2013, 02:48

Задача:
Есть длинная страница по горизонтали более 3000px. Необходимо скролить страницу просто хватая левой кнопкой мыши за любую точку страницы, и тянув её, аналог обычного виндовского просмотрщика изображений.

Вот что я навоял (все работает, но не гладко, в некоторых моментах страница дергается, и нижний скрол теперь нельзя тягать отдельно), тут показываю только JS, и приложил txt файл полностью функциональный:

<script>
$( document ).ready(function() {
	document.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);

    document.onmousedown=DRAG_begindrag;
    document.onmouseup=DRAG_enddrag;

    var DRAG_lastX, DRAG_dragging;
    function DRAG_begindrag(e) {
        if (e.which == 1) {
            window.captureEvents(Event.MOUSEMOVE);
            window.onmousemove=DRAG_drag;

            DRAG_lastX=e.pageX;
            DRAG_dragging=true;
            return false;
        }
        else {return true;}
    }
    function DRAG_enddrag(e) {
        if (e.which == 1) {
            window.releaseEvents(Event.MOUSEMOVE);

            window.onmousemove=null
            DRAG_dragging=false;
            return false;
        }
        else {return true;}
    }
    function DRAG_drag(e) {
        if (DRAG_dragging) {
            s1 = e.pageX - DRAG_lastX
            s = window.pageXOffset - s1;
            window.scroll(s);
            DRAG_lastX = e.pageX;
            return false;
        }
        else {return true;}
    }
});
</script>

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

danik.js · #2 (**permalink**) 15.10.2013, 05:13

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

document.captureEvents(Event.MOUSEUP|Event .MOUSEDOWN);

Эта строка что делает?

danik.js · #3 (**permalink**) 15.10.2013, 05:46

trec, вам к врачу, у вас похоже jQuery головного мозга. Подключать целую либу ради одной функции? Про второе назначение микроскопа наверно хорошо наведаны? В IE8 работать не будет:

<!DOCTYPE html>
<head>
    <title></title>
    <style>
    #page{
    	width: 3200px;
    	height: 1000px;}
    </style>
</head>
<body>
    <div id="page">
This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.
    </div>
    <script>
        var dragHandler = {
            lastClientX: 0,
            start: function (e) {
                if (e.button == 0) {
                    window.addEventListener('mousemove', dragHandler.drag);
                    dragHandler.lastClientX = e.clientX;
                    e.preventDefault();
                }
            },
            end: function (e) {
                if (e.button == 0) {
                    window.removeEventListener('mousemove', dragHandler.drag);
                }
            },
            drag: function (e) {
                var delta = e.clientX - dragHandler.lastClientX;
                window.scrollTo(window.scrollX - delta, window.scrollY);
                dragHandler.lastClientX = e.clientX;
                e.preventDefault();
            }
        };
        document.addEventListener('mousedown', dragHandler.start);
        document.addEventListener('mouseup', dragHandler.end);
    </script>
</body>

рони · #4 (**permalink**) 15.10.2013, 10:38

danik.js,
может вешать не на document а на document.body иначе обычным скролингом нельзя пользоватся

trec · #5 (**permalink**) 15.10.2013, 15:22

Сообщение от danik.js

Эта строка что делает?

Тотальный захват ))

Либу подключал не для этого скрипта, на странице в принципе есть jQuery.

Ваше решение отличное, жаль что в IE не работает.

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

danik.js,
может вешать не на document а на document.body иначе обычным скролингом нельзя пользоватся

Спасибо, помогло.

Мне еще подобное решение предложили http://jsfiddle.net/z7JJg/4/, пробовал в IE, тоже работает, но увы немного тоже притормаживает.
Поправка, убрал из предложенного в примере setTimeout, скрипт перестал притормаживать, теперь работает тоже гладко, и прекрасно.

Всем спасибо. Для тех кто обратится к подобной проблеме, будет 2 варианта её решения.

danik.js · #6 (**permalink**) 15.10.2013, 21:10

Исправил для работы в IE9+ и позаимствовал учет соотношения ширина документа / ширина окна

<!DOCTYPE html>
<head>
    <title></title>
    <style>
    #page{
        width: 3200px;
        height: 1000px;}
    </style>
</head>
<body>
    <div id="page">
This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.
    </div>
    <script>
        function DragHandler() {
            this.lastClientX = 0;
            this.onResize = function (e) {
                this.ratio = (document.body.scrollWidth - document.body.offsetWidth ) / document.body.offsetWidth;
            }.bind(this);
            this.onMouseDown = function (e) {
                if (e.button == 0) {
                    window.addEventListener('mousemove', this.onMouseMove);
                    this.lastClientX = e.clientX;
                    e.preventDefault();
                }
            }.bind(this);
            this.onMouseUp = function (e) {
                if (e.button == 0) {
                    window.removeEventListener('mousemove', this.onMouseMove);
                }
            }.bind(this);
            this.onMouseMove = function (e) {
                var delta = (e.clientX - this.lastClientX) * this.ratio;
                window.scrollTo(window.pageXOffset - delta, window.pageYOffset);
                this.lastClientX = e.clientX;
            }.bind(this);
            document.body.addEventListener('mousedown', this.onMouseDown);
            document.addEventListener('mouseup', this.onMouseUp);
            window.addEventListener('resize', this.onResize);
            this.onResize();
        }

        new DragHandler();
    </script>
</body>

Форум

Справочник

Discord чат

Курсы javascript