I've created an angular directive that conceals element a when the user scrolls on element b. The functionality works smoothly, but I'm encountering a peculiar behavior that has me puzzled:
https://i.sstatic.net/NadtZ.gif
Although it may not be immediately obvious, as you scroll to the bottom, the scrollbar expands because element a is positioned above element b, creating more available space for scrolling. After this point, the scrolling reverses direction inexplicably. To provide some clarity, here's a full-page gif demonstrating the issue:
https://i.sstatic.net/nsSSQ.gif
The directive is coded in TypeScript (angular version 1.5.7 NOT 2.x). I plan to convert it into JavaScript soon, but for now, I wanted to share it quickly. Here's the TypeScript code snippet:
interface IScope extends ng.IScope {
showHeader: boolean;
}
export class IncodeHideHeaderDirective implements ng.IDirective {
restrict = "AE";
require: "ngModel";
scope: Object;
replace = true;
link: ng.IDirectiveLinkFn | ng.IDirectivePrePost;
oldy: number;
justScrolled = false;
constructor() {
const self = this;
this.link = (scope: IScope, element: ng.IAugmentedJQuery) =>
{
element.bind("scroll",
() => {
if (element[0].scrollTop > self.oldy) {
console.log("collapsing");
scope.$eval("showHeader=false");
}
else if (element[0].scrollTop < self.oldy)
{
console.log("expanding");
scope.$eval("showHeader=true");
}
self.oldy = element[0].scrollTop;
}
);
element.bind("load",
() => {
console.log(scope);
this.oldy = element[0].scrollTop;
});
};
}
public static factory(): ng.IDirectiveFactory {
const directive = () => new IncodeHideHeaderDirective();
return directive;
}
}
angular.module("incode.module")
.directive("ixHeader", incode.directives.label.IncodeHideHeaderDirective.factory());
It's quite straightforward. How can I prevent the scrollbar from behaving strangely like this? Here's a fiddle showcasing the issue.