Question

我正在尝试在角度组件中模仿android的可扩展工具栏。

我有类似的html代码

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

工具栏div的高度为70px，其余高度由body div取。由于外部div没有任何溢出内容，因此我没有得到任何滚动事件回调，因此我开始扩展工具栏div。

我尝试使用鼠标滚轮事件获取回调，但使用该数据我无法派生任何东西。同样在mdn中，已弃用wheel事件。

那么我应该如何进行？如果您有任何消息来源，请分享一下，以便我阅读。

Answer 1

您需要的是Directive，它可以将那些鼠标wheel up event/ mouse wheel down事件值捕获到控制器中。

HTML：

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

打字稿： 通过名称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 { }

请找到工作中的StackBlitz示例here。

Answer 2

wheelDelta已从wheelevent中删除，您必须切换到deltaY / deltaX

当div不滚动时获取回调

2 个答案: