Javascript.RU

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

scroll по телу страницы с помощью мыши
Задача:
Есть длинная страница по горизонтали более 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>


Помогите пожалуйста понять, почему страница дергается, и как отвязаться от нижнего скрола, чтобы он отдельно хорошо работал.
Вложения:
Тип файла: txt tmp.txt (1.8 Кб, 11 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 15.10.2013, 05:13
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от trec
    document.captureEvents(Event.MOUSEUP|Event .MOUSEDOWN);
Эта строка что делает?
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #3 (permalink)  
Старый 15.10.2013, 05:46
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

danik.js,
может вешать не на document а на document.body иначе обычным скролингом нельзя пользоватся
Ответить с цитированием
  #5 (permalink)  
Старый 15.10.2013, 15:22
Новичок на форуме
Отправить личное сообщение для trec Посмотреть профиль Найти все сообщения от trec
 
Регистрация: 15.10.2013
Сообщений: 2

Сообщение от danik.js Посмотреть сообщение
Эта строка что делает?
Тотальный захват ))

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

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

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


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

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

Последний раз редактировалось trec, 15.10.2013 в 17:36.
Ответить с цитированием
  #6 (permalink)  
Старый 15.10.2013, 21:10
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Исправил для работы в 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>
__________________
В личку только с интересными предложениями
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
Проблема с загрузкой страницы с помощью load и slideUp slideDown qew4 AJAX и COMET 0 16.09.2012 13:37
Как реализовать переход с одной страницы на другую с помощью клавиш "стрелок" bazilio2010 Общие вопросы Javascript 6 13.11.2011 23:58
Как вытащить сведения из другой страницы с помощью js? makregistr Общие вопросы Javascript 6 28.12.2010 14:07
Прокрутка страницы с помощью клавиш Mirgorod Events/DOM/Window 0 17.06.2010 22:39