C# Blazor 5.0 onscroll 事件未触发

如何解决C# Blazor 5.0 onscroll 事件未触发

我正在尝试使用 @onScroll 事件，但它根本没有触发...如果可能，我不想使用 Javascript。

<div @onscroll="OnScrollChangeValue" class="sub-header p-10 d-none d-lg-block">
    <div class="container">
        <div class="row header-wrapper">
            <div class="col-lg-6">
            </div>
            <div class="col-lg-6 text-left">
                <div id="cl_switcher_wrapper">
                </div>
                <div class="dropdown dropdown-store-header dropdown-store-header-left hidden-xs">
                    <a class="circle-action dropdown-toggle" data-login-link="" href="https://nory.sa/login" rel="nofollow">
                        <span class="theme-icon-user"></span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

private async Task  OnScrollChangeValue(EventArgs e)
{
    OnScrollValue = "gg";
}

在 MrC aka Shaun Curtis 回答之后我明白该事件必须在包含大部分页面的同一个开发中..但在我的情况下仍然无法正常工作

更新代码

<div @onscroll="OnScrollChangeValue" class="store-home salla-theme_6 color-mode-light font-dinnextltarabic-regular">
    <Header></Header>
    <h1>@OnScrollValue</h1>
    @Body

@code{

public int OnScrollValue { get; set; }
private void OnScrollChangeValue(EventArgs e)
{
    OnScrollValue++;
}

}

更新 1.0

我删除了应用程序的 99% 并且事件没有在此处触发代码

<div   @onscroll="OnScrollChangeValue" >


  
    <h1>@OnScrollValue</h1>
    @Body

我关闭了 div 但它没有在这里显示 idk

@code{

public int OnScrollValue { get; set; }
private void OnScrollChangeValue(EventArgs e)
{
    OnScrollValue++;
}

}

@body 只有一个 div 的文本

更新 2.0

似乎事件只在主页内的子 div 内触发..我的意思是该主页的主滚动条不会触发该事件..只会在有溢出的 div 内触发：scroll...如果你试图将溢出滚动放在主 div 中，它将不起作用

style="height:1000px;overflow:scroll" 它适用于这行代码，但我有两个滚动条，一个在左边，另一个在右边

解决方法

你不需要恢复到 JS，这个简单的演示展示了滚动事件的工作。你需要看看你的 CSS 类是做什么的。

@page "/Scroll"
<h3>Scrolling</h3>

<div class="scroll" @onscroll="OnScroll">
    It is a good platform to learn programming.
    It is an educational website. Prepare for the Recruitment drive
    of product based companies like Microsoft,Amazon,Adobe etc with
    a free online placement preparation course. The course focuses
    on various MCQ's & Coding question likely to be asked in the
    interviews & make your upcoming placement season efficient and
    successful. Also,any geeks can help other geeks by writing
    articles on the GeeksforGeeks,publishing articles follow few
    steps that are Articles that need little modification/improvement
    from reviewers are published first. To quickly get your articles
    reviewed,please refer existing articles,their formatting style,coding style,and try to make you are close to them. In case you
    are a beginner,you may refer Guidelines to write an Article
</div>
<div class="m-2 p-2">Scroll events: @counter</div>


<style>

    div.scroll {
        margin: 4px,4px;
        padding: 4px;
        width: 500px;
        height: 110px;
        overflow-x: hidden;
        overflow-y: auto;
        text-align: justify;
    }
</style>

@code {

    private int counter;

    private void OnScroll()
    {
        counter++;
    }

}