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

Posted 2023-03-06

【中文标题】如何在开始滚动时更改光标 css 属性，并在停止滚动时再次更改光标属性

【英文标题】：How to change cursor css property when start to scroll and again change cursor property when stop to scroll

【发布时间】：2021-10-11 21:25:18

【问题描述】：

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

帮助解决这个问题。

【参考方案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);

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