YUI3 scrollView и колесико мыши - PullRequest
Новая
       15

YUI3 scrollView и колесико мыши

1 голос
/ 07 ноября 2011

Я начинаю работать только с YUI3.Я включил компонент scrollView, но он не работал событие mousewheel, в опциях я не нашел, как его включить.Буду признателен за любую помощь. 

var scrollView = new Y.ScrollView({
    id: "scrollview",
    srcNode: '.scrollview-item',
    height: 375,
    flick: {
        minDistance: 10,
        minVelocity: 0.3,
        axis: "y"
    }
});
scrollView.render();

1 Ответ

1 голос
/ 09 декабря 2011

Я также наткнулся на это, после некоторых проб и ошибок, мне удалось заставить это работать (обратите внимание, что это просто простая прокрутка, без замедления). 

var DOM_MOUSE_SCROLL = 'DOMMouseScroll',
    fixArgs = function(args) {
        var a = Y.Array(args, 0, true), target;
        if (Y.UA.gecko) {
            a[0] = DOM_MOUSE_SCROLL;
            // target = Y.config.win;
        } else {
            // target = Y.config.doc;
        }

        if (a.length < 3) {
            // a[2] = target;
        } else {
            // a.splice(2, 0, target);
        }

        return a;
    };

Y.Env.evt.plugins.mousewheel = {
    on: function() {
        return Y.Event._attach(fixArgs(arguments));
    },

    detach: function() {
        return Y.Event.detach.apply(Y.Event, fixArgs(arguments));
    }
};

Это событие колесика мыши YUI, но оно немного изменилось. Самая большая проблема заключалась в том, что изначально элементы окна или документа не имели смысла (например, когда вы поворачиваете указатель мыши над элементом #myelement, вы хотите, чтобы он был возвращаемой целью ..)

Ниже приведен код, используемый для инициализации ScrollView и функции, которая обрабатывает событие mousewheel: 

// ScrollView
    var scrollView = new Y.ScrollView({
        id: "scrollview",
        srcNode: '#mycontainer',
        height: 490,
        flick: {
            minDistance:10,
            minVelocity:0.3,
            axis: "y"
        }
    });

    scrollView.render();

    var content = scrollView.get("contentBox"); 
    var scroll_modifier = 10; // 10px per Delta
    var current_scroll_y, scroll_to;

    content.on("mousewheel", function(e) {
        // check whether this is the scrollview container
        if ( e.currentTarget.hasClass('container') ) {
            current_scroll_y = scrollView.get('scrollY');
            scroll_to = current_scroll_y - ( scroll_modifier * e.wheelDelta );

            // trying to scroll above top of the container - scroll to start
            if ( scroll_to <= scrollView._minScrollY ) {
                // in my case, this made the scrollbars plugin to move, but I'm quite sure it's important for other stuff as well :)
                scrollView._uiDimensionsChange();
                scrollView.scrollTo(0, scrollView._minScrollY);
            } else if ( scroll_to >= scrollView._maxScrollY ) { // trying to scroll beneath the end of the container - scroll to end
                scrollView._uiDimensionsChange();
                scrollView.scrollTo(0, scrollView._maxScrollY);
            } else { // otherwise just scroll to the calculated Y
                scrollView._uiDimensionsChange();
                scrollView.scrollTo(0, scroll_to);
            };
            // if we have scrollbars plugin, flash the scrollbar
            if ( scrollView.scrollbars ) {
                scrollView.scrollbars.flash();
            };

            // prevent browser default behavior on mouse scroll
            e.preventDefault();
        };
    });

Так что, в принципе, так мне и удалось, но моя следующая задача - заставить полосу прокрутки работать как обычная полоса прокрутки (при ее перетаскивании контейнер должен двигаться соответственно ...)

Надеюсь, это кому-нибудь поможет:)

...