如何在开始滚动时更改光标 css 属性，并在停止滚动时再次更改光标属性答案

【问题标题】：How to change cursor css property when start to scroll and again change cursor property when stop to scroll如何在开始滚动时更改光标 css 属性，并在停止滚动时再次更改光标属性
【发布时间】：2021-10-11 21:25:18
【问题描述】：

我尝试在角度函数中更改光标属性。我的问题是，当我现在开始滚动网页时，光标将更改指针，而当我现在停止滚动时，光标将更改为默认值。我尝试 window.pageYOffset 属性。但它的输出是光标将变为指针，但当我再次停止滚动时，光标将变为指针。

帮助解决这个问题。

【问题讨论】：

标签： javascript html css angularjs angular

【解决方案1】：

Demo您可以为此使用主机监听器

  class="casa";
  private timeout: number;

  @HostListener('window:scroll', ['$event']) // for window scroll events
  onScroll(event) {
    this.class="hand";
    clearTimeout(this.timeout);
    this.timeout = setTimeout(() => {
      this.class = "casa";
    }, 300);
  }

你可以使用自定义类 css 属性

.hand{
  cursor:pointer;
}
.casa{
  cursor:default ;}

并将这个事件交给 html

<div class="{{class}}"(scroll)="onScroll($event)" </div>

【讨论】：

【解决方案2】：

你可以试试这样的：

var timer = null;
window.addEventListener('scroll', function() {
document.body.style.cursor = 'all-scroll';
if(timer !== null) {
    clearTimeout(timer);        
}
timer = setTimeout(function() {
      document.body.style.cursor = 'default';
}, 150);
}, false);

检测滚动事件然后更改全局光标。
设置超时，以便在用户停止滚动时将其恢复为正常状态。

【讨论】：