[英]Angular hide button on down-scroll/ show on up-scroll
I have implemented a way to show a button only on up-scroll: The way how I implemented, it feels like, it takes way to many computations, because the logic listens for every scroll-event. 我已经实现了一种只在向上滚动时显示按钮的方法:感觉上,实现的方式需要进行许多计算,因为逻辑侦听每个滚动事件。 Maybe some of you nerds, have a better approach than mine. 也许有些书呆子比我有更好的方法。 :) The Requirement is: When the Page initially loads or on up-scroll the button should be displayed in the UI. :)要求是:最初加载页面时或在向上滚动时,按钮应显示在UI中。 On down-scroll the button should be hidden. 向下滚动时,该按钮应隐藏。
I used Angulars @HostListener(..)
to listen for the scroll event. 我使用Angulars @HostListener(..)
侦听滚动事件。
public lastScrolledHeight: number = 0;
public showAddButton: boolean = true;
@HostListener('window:scroll', ['$event']) onScroll(event) {
const window = event.path[1];
const currentScrollHeight = window.scrollY;
console.log(currentScrollHeight);
if (currentScrollHeight > this.lastScrolledHeight) {
this.showAddButton = false;
console.log('should NOT show button');
} else {
this.showAddButton = true;
console.log('should show button');
}
this.lastScrolledHeight = currentScrollHeight;
}
<button class="btn btn-success btn-circle btn-xl"
[ngClass]="(showAddButton === true) ? 'scale-in' : 'scale-out'"
</button>
For the sake of completion the CSS: 为了完整起见,CSS:
.scale-out {
-webkit-animation: scale-out .2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: scale-out .2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
.scale-in {
-webkit-animation: scale-in .2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: scale-in .2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
Looking forward for any Input. 期待任何输入。 :) :)
you should convert scroll events to Observable. 您应该将滚动事件转换为Observable。 Then you can control processing by using debounceTime
. 然后,您可以使用debounceTime
控制处理。
You can either add a Subject, pass the scroll info, then execute your logic 您可以添加一个主题,传递滚动信息,然后执行您的逻辑
scroll = new Subject<number>();
ngOnInit() {
this.scroll
.pipe(debounceTime(200))
.subscribe((y) => this.dealWithScroll(window.scrollY));
}
ngOnDestroy() {
this.scroll.complete();
}
@HostListener('window:scroll') watchScroll() {
this.scroll.next(window.scrollY);
}
dealWithScroll(y: number) {}
Or you could create Observable from event 或者您可以从事件创建Observable
scroller: Subscription;
ngOnInit() {
this.scroller = fromEvent(window, 'scroll')
.pipe(debounceTime(200))
.subscribe(() => this.dealWithScroll(window.scrollY)); }
ngOnDestroy() {
this.scroller.unsubscribe();
}
As you see you can access window object directly. 如您所见,您可以直接访问窗口对象。 Also showAddButton === true
seems excessive showAddButton
should be good enough. 另外showAddButton === true
似乎过多的showAddButton
应该足够好。 Don't forget to unsubscribe/complete Observable. 不要忘记退订/完成可观察的项目。
I would add a small buffer 我会添加一个小缓冲区
It would make the app less delicate touch sensitive, and less calculation needed. 这将使该应用程序的触感不那么精致,并且所需的计算也更少。
export class AppComponent {
public lastScrolledHeight: number = 0;
public showAddButton: boolean = true;
private buffer = 0
@HostListener('window:scroll', ['$event']) onScroll(event) {
const window = event.path[1];
if (this.ignoredByBuffer()) {
return;
}
const currentScrollHeight = window.scrollY;
if (currentScrollHeight > this.lastScrolledHeight) {
this.showAddButton = false;
console.log('should NOT show button');
} else {
this.showAddButton = true;
console.log('should show button');
}
this.lastScrolledHeight = currentScrollHeight;
}
private ignoredByBuffer(): boolean {
if (this.buffer < 10) {
this.buffer += 1;
return true;
}
this.buffer = 0;
return false;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.