私は、キャプチャに必要なonscrollのイベントwindowやbody私のblazorサーバ側アプリケーションで。今のところ、イベントをキャプチャしてそこでロジックを実行するスクリプトファイルを使用してこれを実装しました。
の場合window：
window.onscroll = function() {myFunction()};
function myFunction() {
// ... my logics here
}
タグのonscrollイベントをキャプチャする方法はbody？blazorではサーバー側bodyは_Host.cshtml使用できないファイルにあります@onscroll。
の場合body：
<body onscroll="myFunction()">
上記のものは機能しますが、blazorを使用しているときのこの実装には満足していません。
これを純粋にC＃で実装する方法を支援してください。
@近眼のマグー私を正しい方向に向けてくれてありがとう。を使用してこれを機能させましたIntersectionObserver。
これが私がしたことです、
タグへの参照をwindow.onscroll = function() {myFunction()};削除しonscroll="myFunction()"、<body>タグからも削除しました。
そして、Index.razorコンポーネントIntersectionObserverから私の関数OnAfterRenderAsyncを呼び出しました
@code{
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeVoidAsync("highlightMenu");
}
}
}
IntersectionObserver 関数：
function myFunction() {
const sections = document.querySelectorAll('.page-section,.site-header');
const config = {
rootMargin: '-55px 0px -85%'
};
let observer = new IntersectionObserver(function
(entries, self) {
entries.forEach(entry => {
if (entry.isIntersecting) {
intersectionHandler(entry);
}
});
}, config);
sections.forEach(section => observer.observe(section));
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加