Изменение стиля блока из JS при возникновении события

Форум /

Друзья, возник вот такой вопрос. Как при возникновении события добраться до стилей блока, на котором это событие возникло, и изменить какой-нибудь отдельный параметр.

Задача - хочу сделать DIV с горизонтальной прокруткой по скроллингу мыши. Для галереи картинок. Я сделал блок с overflow: hidden. В него вложил длинный блок из картинок. Теперь хочу по событию scroll менять параметр left для блока с картинками. Подписка на события вроде понятна, но в описании библиотеки jquery в bem-core события scroll нет. Чую, что в BEM есть нюансы в реализации такой функциональности.

В общем, подскажите пожалуйста, в какую сторону копать )

9 years ago

tadatuta

Метод bindTo() позволяется подписаться на любые jQuery-события, в том числе и на scroll.

Схематично получится что-то вроде:

modules.define('my-block', ['i-bem__dom'], function(provide, BEMDOM) {

provide(BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                var imagesBlock = this.findBlockInside('images'), // BEM block
                    $imagesBlock = imagesBlock.domElem; // jQuery object

                // подписываемся на событие `scroll` на блоке my-block
                this.bindTo('scroll', function() {
                    $imagesBlock.css({ left: 150 });
                });
            }
        }
    }
}));

});

P.S. При подписке на scroll есть смысл использовать functions__throttle, чтобы коллбек не вызывался слишком часто.

9 years ago

Maximario

О! Благодарю ) Я взял события mousewheel (все кроме firefox) и DOMMouseScroll (для firefox). Теперь хочу получить направление прокрутки. Нашел, что это передается в свойствах wheelDelta и detail, соответственно.

Не подскажите, как их получить?

9 years ago

tadatuta

this.bindTo('mousewheel', function(event) {
    // в event ссылка на объект события
});

9 years ago

Maximario

Ага, ок. Спасибо!

Чтобы оставлять комментарии, необходимо авторизоваться.