由于浏览器的URL栏/地址栏,我在Android Chrome移动浏览器上遇到一个非常奇怪的错误。与其他常见浏览器一起使用的网站效果很好。
有一个固定在顶部的滚动按钮(视频:https://streamable.com/21iu2),当此Chrome地址栏出现时,只有当我触摸按钮上方的屏幕时,该按钮才起作用。
滚动至顶部的按钮CSS:
#scrollToTop {
position: fixed;
right: 0;
bottom: 0;
margin: 1rem;
z-index: 9997;
border: 1px solid rgba(255, 255, 255, 0.14901960784313725);
background: rgba(52, 58, 64, .5);
cursor: pointer;
&:hover {
background: rgba(52, 58, 64, 0.83);
}
i {
color: white;
font-weight: 800;
padding: 1rem;
}
}
组件(角度6):
import {Component, HostListener} from '@angular/core';
@Component({
selector: 'app-scroll-to-top',
template: `
<a *ngIf="isVisible" id="scrollToTop" class="rounded" (click)="scrollToTop()">
<i class="fa fa-angle-up" aria-hidden="true"></i>
</a>
`,
styleUrls: ['./scroll-to-top.component.scss']
})
export class ScrollToTopComponent {
isVisible = false;
@HostListener('window:scroll', [''])
onWindowScroll() {
this.isVisible = window.pageYOffset > 100 ? true : false;
}
scrollToTop(): void {
window.scroll({top: 0, left: 0, behavior: 'smooth'});
}
}
我该如何解决这些问题?或者如何通过解决方法“解决”这些问题?
感谢帮助。