2017-10-17 85 views
0

我有一个div在另一个div里,外部div的高度小于内容。滚动事件没有触发div内滚动div

第一内容具有滚动事件

<div style="overflow:auto;height:200px"> 
    <div (scroll)="scrollHandler($event)">Hello {{name}}</div> 

.... Other content elements. 

但这滚动事件是行不通的。 请注意,我想触发元素上的滚动事件,而不是在窗口上。

我这里有

https://plnkr.co/edit/Ib0fxBIb7syGdEtQ1Rz4

+0

编写一个指令并在滚动 – Vega

回答

2

scroll事件处理程序应该是在外层div一个plunkr,具有滚动条之一:

<div style="overflow:auto; height:200px" (scroll)="scrollHandler($event)"> 
    <div>Hello {{name}}</div> 
    ... 
</div> 

您可以测试this modified plunker(检查控制台,我删除了警报呼叫)。

+0

上设置hostlistener,但是如果在滚动时特定元素达到div顶部时必须编写逻辑,该怎么办?假设列表中到达滚动顶部的元素需要变成红色。 这样我想挂钩列表中每个div的事件。 –

+0

您可以将'event.target.scrollTop'与元素的'offsetTop'进行比较,如[修改后的plunker](https://plnkr.co/edit/8wLQPSkDdW39qxEFYMGk?p=info)所示。 – ConnorsFan