行者小高 發表於 2019-5-6 11:06:00

Angular 监听滚动条事件

<h3 style="font-size: 16px; font-weight: bold; line-height: 1.5; margin: 10px 0; color: rgba(51, 51, 51, 1); padding: 10px 20px; background-color: rgba(252, 211, 230, 1); border: 1px solid rgba(254, 193, 220, 1)">一、引用fromEvent</h3>
<div class="cnblogs_code">
<pre>import { fromEvent } <span style="color: rgba(0, 0, 255, 1)">from</span> <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">rxjs</span><span style="color: rgba(128, 0, 0, 1)">'</span>;</pre>
</div>
<h3 style="font-size: 16px; font-weight: bold; line-height: 1.5; margin: 10px 0; color: rgba(51, 51, 51, 1); padding: 10px 20px; background-color: rgba(252, 211, 230, 1); border: 1px solid rgba(254, 193, 220, 1)">二、调用fromEvent</h3>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">this</span>.subscribeScoll = fromEvent(window, <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">scroll</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">)
      .subscribe((</span><span style="color: rgba(0, 0, 255, 1)">event</span>) =&gt;<span style="color: rgba(0, 0, 0, 1)"> {
      </span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.onWindowScroll();
});
onWindowScroll(){<span style="color: rgba(51, 153, 102, 1)">console.log(页面滚动了);</span>}；</span></pre>
</div>
<h3 style="font-size: 16px; font-weight: bold; line-height: 1.5; margin: 10px 0; color: rgba(51, 51, 51, 1); padding: 10px 20px; background-color: rgba(239, 243, 247, 1); border-left: 5px solid rgba(25, 118, 210, 1)">三、调用滚动函数</h3>
<p>&nbsp;详细代码：</p>
<div class="cnblogs_code">
<pre>import { Component, OnInit } <span style="color: rgba(0, 0, 255, 1)">from</span> <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">@angular/core</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">;
import { fromEvent } </span><span style="color: rgba(0, 0, 255, 1)">from</span> <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">rxjs</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">; <span style="color: rgba(51, 153, 102, 1)">//引入</span>

@Component({
selector: </span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">app-heroes</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">,
templateUrl: </span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">./heroes.component.html</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">,
styleUrls: [</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">./heroes.component.css</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">]
})
export </span><span style="color: rgba(0, 0, 255, 1)">class</span><span style="color: rgba(0, 0, 0, 1)"> HeroesComponent implements OnInit {
subscribeScoll:any;
scrollDis:any </span>=<span style="color: rgba(0, 0, 0, 1)"> {
    _top:</span><span style="color: rgba(128, 0, 128, 1)">0</span><span style="color: rgba(0, 0, 0, 1)">
}
constructor() { }
ngOnInit() {
    </span><span style="color: rgba(0, 0, 255, 1)">this</span>.subscribeScoll = fromEvent(window, <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">scroll</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">)
      .subscribe((</span><span style="color: rgba(0, 0, 255, 1)">event</span>) =&gt;<span style="color: rgba(0, 0, 0, 1)"> {
      </span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.onWindowScroll();<span style="color: rgba(51, 153, 102, 1)">//调用</span>
    });
}
scollPostion() {
    </span><span style="color: rgba(0, 0, 255, 1)">var</span><span style="color: rgba(0, 0, 0, 1)"> t, l, w, h;
    </span><span style="color: rgba(0, 0, 255, 1)">if</span> (document.documentElement &amp;&amp;<span style="color: rgba(0, 0, 0, 1)"> document.documentElement.scrollTop) {
      t </span>=<span style="color: rgba(0, 0, 0, 1)"> document.documentElement.scrollTop;
      l </span>=<span style="color: rgba(0, 0, 0, 1)"> document.documentElement.scrollLeft;
      w </span>=<span style="color: rgba(0, 0, 0, 1)"> document.documentElement.scrollWidth;
      h </span>=<span style="color: rgba(0, 0, 0, 1)"> document.documentElement.scrollHeight;
    } </span><span style="color: rgba(0, 0, 255, 1)">else</span> <span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (document.body) {
      t </span>=<span style="color: rgba(0, 0, 0, 1)"> document.body.scrollTop;
      l </span>=<span style="color: rgba(0, 0, 0, 1)"> document.body.scrollLeft;
      w </span>=<span style="color: rgba(0, 0, 0, 1)"> document.body.scrollWidth;
      h </span>=<span style="color: rgba(0, 0, 0, 1)"> document.body.scrollHeight;
    }
    </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> {
      top: t,
      left: l,
      width: w,
      height: h
    };
}
onWindowScroll(){
    </span><span style="color: rgba(0, 0, 255, 1)">this</span>.scrollDis._top = <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.scollPostion().top;
    console.log(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.scrollDis._top);
}
}</span></pre>
</div>
<p>&nbsp;</p><br><br>
来源：https://www.cnblogs.com/1156063074hp/p/10818417.html
頁: [1]
查看完整版本: Angular 监听滚动条事件