promo / wheel-indicator Goto Github PK

Руслан, посмотри, пожалуйста. Возможно я что-то накосячил, но алгоритм я вообще не трогал. Сейчас во всех демках первое событие всегда up, даже если скроллим вниз.

First of all, congratulations for the script! It seems to work quite well in general.

I found a couple of small problems, this is one of them as you can see in the video:
https://vimeo.com/131253387

This is what I've found so far:

//cdn.jsdelivr.net/npm/[email protected]/lib/wheel-indicator.js

The other suggestion is to fix jsLint warning: see here #29 (comment)

How to get this to work with require.js?

Will there be support for touch events?

Can we detect force of gesture? It's useful in situations, when we have horizontal carousel with multiple items on the screen. We could move a different number of elements depending on the strength.

Я протестировал на многих Macbook'ах Pro эту проблему - на некоторых она проявляется (где-то с 1 из 20 Macbook Pro возникает данная проблема, и только в Chrome).

Приведу сразу результаты вывода обработки события mousewheel
(формат вывода: скрипт: строка - Date().getTime() - event.wheelDelta):

wheel-indicator.js:127 - 1433329389274 - 9
wheel-indicator.js:127 - 1433329389351 - 422
wheel-indicator.js:127 - 1433329389370 - 279
wheel-indicator.js:127 - 1433329389625 - 273
wheel-indicator.js:127 - 1433329389631 - 225
wheel-indicator.js:127 - 1433329389667 - 2655
wheel-indicator.js:127 - 1433329389680 - 78
wheel-indicator.js:127 - 1433329389719 - 138
wheel-indicator.js:127 - 1433329389729 - 62
wheel-indicator.js:127 - 1433329389779 - 110
wheel-indicator.js:127 - 1433329389966 - 372
wheel-indicator.js:127 - 1433329389984 - 18
wheel-indicator.js:127 - 1433329390444 - 140
wheel-indicator.js:127 - 1433329390596 - 3

Как видно, максимальный разрыв между обработкой - 460ms (предпредпоследняя и предпоследняя сроки). Почему происходит такой рывок - не известно. Но он происходит постоянно (9 из 10 прокруток тачем приводят к такому или немного меньшим разрывам).

В примере представлен результат теста с самам длинным разрывом. В остальных случаях он не превышал 300ms (около 150-250 в среднем).

Исправил данную ситуацию, увеличим таймаут в setTimeout() с 150ms, прописанных в скрипте по-умолчанию, до 500ms. Понимаю, что 500ms в каких-то редких случаях может быть много, но до 300ms увеличить таймаут можно без проблем - тогда данная проблема будет возникать на проблемной связке Macbook Pro + Chrome только в каждом 20-м вызове, что делает скрипт намного стабильнее к данной проблеме.

indicator.setOptions({preventMouse:"false"});

is above the right syntax?

Please add english comments in code, it would be easier to understand it.

Нужна возможность отменить работу колеса мыши на уровне плагина. Сейчас в демках при скроллинге на блоках страница тоже скроллится. Т.к. мы не зависим от от jquery mousewheel, то нужна своя реализация отмены. Собираюсь этим заняться.

can not read state in call back function althogh i am binding callback but its not work.

Надо попробовать уменьшить кол-во проверяемых значение дельты с 5 до 3-х

Forgive the silly question, but is this intended to also detect mobile scroll (swipe) actions?

The grammar isn't 100% clear and it's very much not working on mobile. Just wondering.

@ulitcos Приходится писать длинный код, типа $('.jquery').on('wheel-indicator', function(e){
Я бы предложил переименовать во-что-то покороче, например wheely (колесико). Такого модуля в npm еще нет, и название забавное.

in IE Edge on some devices (with touch screen I suppose) there is no onmousewheel nor onwheel event, so wheel-indicator doesn't work at all…

Hello, thank you for this nice library! The latest version makes Chrome log:
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See
Do you have any ideas how to fix this?

It would be really great if this library was on NPM.

Instructions can be found here: https://docs.npmjs.com/getting-started/publishing-npm-packages

    function addEvent(elem, type, handler){
        if(elem.addEventListener) {
            elem.addEventListener(type, handler, false);
        } else if (elem.attachEvent) {
            elem.attachEvent('on' + type, handler);
        }
    }

Please see here:
https://developers.google.com/web/tools/lighthouse/audits/passive-event-listeners
https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection

The workaround for Lighthouse report is to test for passive support

var supportsPassive = false;
try {
	var opts = Object.defineProperty({}, "passive", {
			get: function () {
				supportsPassive = true;
			}
		});
	root.addEventListener("test", null, opts);
} catch (e) {}

If fails, include polyfill

	if (!supportsPassive) {
		scriptsArray.push("//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js");
	}

and change in wheel-indicator.js

    function addEvent(elem, type, handler){
        if(elem.addEventListener) {
            elem.addEventListener(type, handler, {passive: true});
        } else if (elem.attachEvent) {
            elem.attachEvent('on' + type, handler);
        }
    }

    function removeEvent(elem, type, handler) {
        if (elem.removeEventListener) {
            elem.removeEventListener(type, handler, {passive: true});
        } else if (elem.detachEvent) {
            elem.detachEvent('on'+ type, handler);
        }
    }

In that case the Lighthouse addon for Chrome is happy.

I suspect in other use cases the solution above may not be acceptable.

Стоит это сделать, я считаю. Можно оставить ссылку на русское редми, но тогда их оба придется поддерживать в актуальном состоянии, что немного неудобно.

On OS X El Capitan using Chrome 47.0.2526.73 (64-bit)

I sometimes get a value of -0 (minus zero) when scrolling, which is interpreted as direction "up". It is annoying because it also happens while scrolling downwards. Any hint on this?

I'm having an issue with a scroll event being fired when two fingers touch a MacBook trackpad or Magic Trackpad, without moving my fingers up or down. I'm very carefully just touching the trackpad and the scroll event fires. I don't want this to happen. I only want the scroll event firing when actually scrolling.

Any insight on this? I can replicate this issue using demo/index.html in the project.

There is umd modules format. We should rewrite plugin to It to improve flexibility of use.

В дистрибьюционные файлы необходимо сделать вставку с версией и ссылками на репозиторий. Их следует брать из package.json.

Any way of implementing support for left / right scroll detection?

Now there is no destroy method, so there is no way to destroy plugin and remove all event listeners.

What about
indicator.on('up', function(){})
indicator.on('down', function(){})
in addition to the main interface?

Как вовремя я случайно наткнулся на вашу статью на хабре! Она как подарок мне сегодня на день рождения! Спасибо за плагин!

homeWheel.setOptions({ preventMouse: false });

Not working this setoptions

Добрый день! Не могу понять есть ли поддержка IE10+, но callback не срабатывает в этих браузерах..

Maybe we will use document as default block, if user didn't set own?

new WheelIndicator(); //equal new WheelIndicator(document)