Here I have created the directive, which emit events on mouse wheel scroll upward and downward
You can use these directives for image zoom-in and zoom-out. Element binds to event DOMMouseScroll ( for firefox ), mousewheel ( for chrome), onmousewheel (for IE)
Directive for Mouse Wheel Scroll Up
HTML Usage
<div mouseWheel (mouseWheelUp)="mouseWheelUpFunc(event)" (mouseWheelDown)="mouseWheelDownFunc(event)"></div>
mousewheel.directive.ts
This is attribute directive which catches the mouse wheel scroll event on all type of browsers
import { Directive, Output, HostListener, EventEmitter } from '@angular/core'; @Directive({ selector: '[mouseWheel]' }) export class MouseWheelDirective { @Output() mouseWheelUp = new EventEmitter(); @Output() mouseWheelDown = new EventEmitter(); @HostListener('mousewheel', ['$event']) onMouseWheelChrome(event: any) { this.mouseWheelFunc(event); } @HostListener('DOMMouseScroll', ['$event']) onMouseWheelFirefox(event: any) { this.mouseWheelFunc(event); } @HostListener('onmousewheel', ['$event']) onMouseWheelIE(event: any) { this.mouseWheelFunc(event); } mouseWheelFunc(event: any) { var event = window.event || event; // old IE support var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail))); if(delta > 0) { this.mouseWheelUp.emit(event); } else if(delta < 0) { this.mouseWheelDown.emit(event); } // for IE event.returnValue = false; // for Chrome and Firefox if(event.preventDefault) { event.preventDefault(); } } }
app.module.ts
We should import above directive and include in this module.
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { MouseWheelDirective } from './mousewheel.directive'; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent, MouseWheelDirective ], bootstrap: [ AppComponent ] }) export class AppModule { }
it's really perfect but can you give me little tip ,how can I disable this directive.
ReplyDeleteThis solution works with angular 4 too. scroll event no longer works with Ng4
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThanks man, worked like a charm in angular 4.
ReplyDeleteCan someone tell me better URL to study angular basic ànd advànced.
ReplyDeletethankssssssss man thanks
ReplyDeleteFrom now on when you have any problem with your Opera Browser. All you need to do is call us at our Opera customer service number to avail our market-leading services. Our team comprises of the very best technicians, qualified to handle any and all Opera browser problems. Call us any time of your choosing. Our phone lines are open 24×7, seven days a week. We will make sure that your problem is resolved in the minimum amount of time. Our techniques are effective and time-saving. We are committed to providing you with best in the business services at the cheapest price in the market. Next time you have a problem with your Opera Browser, you know whom to call. uc browser customer service
ReplyDeleteAwesome, good job and easy to integrate!
ReplyDeleteReally Nice and simple and clean coded :)
ReplyDeleteVery nice, thank you.
ReplyDeleteIt's great that you make this information public.
ReplyDeletedream girls
What a fantastic publish! Other than the seriously helpful ideas, it really is just really ! Thanks a great deal in your strategies instastalker
ReplyDeletethis is not good.i can't scroll down
ReplyDeleteThank you so much. This article was very essential for me . I after a long time I found this kind of article.
ReplyDeleteLove back Solution Specialist
Vashikaran specialist
Love Vashikaran Specialist
Vashikaran Specialist in India Vashikaran Specialist in Bangalore Vashikaran Specialist in Mumbai Love Vashikaran Specialist in MumbaiBlack magic specialist astrologer