div不滚动时获取回调答案

【问题标题】：Get callback when div is not scrollingdiv不滚动时获取回调
【发布时间】：2020-12-17 03:25:23
【问题描述】：

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

我有类似的html代码

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

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

我尝试了鼠标滚轮事件，我得到了那个回调，但是有了那个数据，我无法派生任何东西。同样在 mdn 中写着 wheel 事件已弃用。

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

【问题讨论】：

标签： javascript html angular events

【解决方案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。

【讨论】：

我不明白你想在这里展示什么？我的意思是输出。
在指令onMousewheel(event)事件中可以捕获所有相关的鼠标滚轮值
@Sela 您能解释一下您的答案，它对我的情况有何帮助？我也可以在组件的模板中捕获轮子事件，指令与此有何不同？

【解决方案2】：

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

【讨论】：