diff --git a/lib/services/scroll.service.ts b/lib/services/scroll.service.ts index 4d9a9198..679e1cfc 100644 --- a/lib/services/scroll.service.ts +++ b/lib/services/scroll.service.ts @@ -2,6 +2,7 @@ import { Injectable, EventEmitter, Output } from '@angular/core'; import { BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter'; import { OptionsService } from './options.service'; +import { throttle } from '../utils/helpers'; export const INVIEW_POSITION = { ABOVE : 1, @@ -60,7 +61,8 @@ export class ScrollService { bind() { this.prevOffsetY = this.scrollY(); - this._cancel = this.dom.onAndCancel(this.$scrollParent, 'scroll', (evt) => { this.scrollHandler(evt); }); + this._cancel = this.dom.onAndCancel(this.$scrollParent, 'scroll', + throttle((evt) => { this.scrollHandler(evt); }, 100, this)); } unbind() { diff --git a/lib/utils/helpers.ts b/lib/utils/helpers.ts index 7be266d5..3cc8c1ce 100644 --- a/lib/utils/helpers.ts +++ b/lib/utils/helpers.ts @@ -89,3 +89,27 @@ export function safePush(obj, prop, val) { if (!obj[prop]) obj[prop] = []; obj[prop].push(val); } + +// credits https://remysharp.com/2010/07/21/throttling-function-calls +export function throttle(fn, threshhold, scope) { + threshhold = threshhold || 250; + var last, + deferTimer; + return function () { + var context = scope || this; + + var now = +new Date, + args = arguments; + if (last && now < last + threshhold) { + // hold on to it + clearTimeout(deferTimer); + deferTimer = setTimeout(function () { + last = now; + fn.apply(context, args); + }, threshhold); + } else { + last = now; + fn.apply(context, args); + } + }; +}