当我在图表上滚动时,阻止滚动事件滚动整个页面

问题描述 投票:0回答:1

所以,我是angular2 +的新手,我有一个用jhipster构建的基本Web应用程序,目前,它基本上只有一个非常简单的组织结构图:

https://github.com/dabeng/ng-orgchart

现在的问题是,当我用鼠标在图表上滚动时,它也会滚动整个页面,如果鼠标悬停在图表上,我希望它仅缩放图表。我该怎么做呢?我尝试扩展正在使用的第三方库,并在滚动事件上添加对“ stopPropagation”的调用,但这似乎并没有解决问题。这是我所拥有的:

import { Directive } from '@angular/core';
import { Host, Self, Optional } from '@angular/core';
import { ɵa as OrgChartContainer } from '@dabeng/ng-orgchart'


@Directive({
  selector: '[jhiCustomOrgChart]'
})
export class CustomOrgChartDirective {

  constructor(@Host() @Self() @Optional() public hostChart : OrgChartContainer) {

     const app = (hostChart as any)._app;

     hostChart.zoomHandler = (ev) => {
        ev.stopPropagation();
        const newScale = 1 + (ev.deltaY > 0 ? -0.2 : 0.2);
        hostChart.setChartScale(newScale);
     }
  }
}
angular events scroll
1个回答
1
投票

在这里找到我的解决方案:Prevent scrolling of parent element when inner element scroll position reaches top/bottom?

只需要添加

ev.preventDefault()

这就是我需要的!

© www.soinside.com 2019 - 2024. All rights reserved.