javascript - div 不滚动时获取回调

Question

我试图在 Angular 组件中模仿android的可扩展工具栏。

我有像这样的html代码

<div (scroll)="someScroll($event)">
  <div class="toolbar"></div>
  <div class="body"></div>
</div>

工具栏 div 的高度为 70px ，剩余高度由主体 div 占据。由于外部 div 没有任何溢出内容，因此我没有收到任何滚动事件回调，因此我无法启动工具栏 div 的扩展。

我尝试使用鼠标滚轮事件得到该回调，但使用该数据我无法得出任何内容。 mdn 中也写着 wheel event is deprecated.

那么我应该如何继续呢？如果您有任何来源，请分享，以便我可以阅读。

Answer 1

您需要的是Directive，它可以将这些鼠标滚轮向上事件/鼠标滚轮向下事件值捕获到您的 Controller 中。

HTML:

   <h1>Wheel Directive Demo
    <div wheel style="height:1000px;background-color:green">
        <input type="text" value=""/>
    SCROLL MOUSE
   </div>

typescript :按名称创建新指令 wheel.directive.ts

import { Directive, HostListener, Renderer, ElementRef } from '@angular/core';
@Directive({
  selector: '[wheel]'
})
export class WheelDirective {
  i: number = 1;
  constructor(
    private renderer: Renderer,
    private el: ElementRef
  ) { }

      @HostListener('mousewheel', ['$event']) onMousewheel(event) {
        if (event.wheelDelta > 0) {
          event.srcElement.style.setProperty('transition', 'all 200ms ease-in')
          event.srcElement.style.setProperty('transform', "scale(" + this.i + 1 + ")")
        }
        if (event.wheelDelta < 0) {
          event.srcElement.style.setProperty('transition', 'all 200ms ease-out')
          event.srcElement.style.setProperty('transform', +"scale(" + this.i - 1 + ")")
        }
      }
    }

在AppModule.ts中:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { WheelDirective } from './wheel.directive'
@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, HelloComponent, WheelDirective],
  bootstrap: [AppComponent]
})
export class AppModule { }

Please find the working StackBlitz example here.