C# Blazor 5.0 onscroll 事件未触发

Question

I'm trying to use @onScroll event but it's not firing at all... I prefer not to use Javascript if it's possible.

<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";
}

I understood after MrC aka Shaun Curtis answer that the event must be in the same dev that contains most of the page..but in my case still not working

Updated code

<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++;
}

}

Updated 1.0

I deleted 99% of the app and the event not firing here the code

<div   @onscroll="OnScrollChangeValue" >


  
    <h1>@OnScrollValue</h1>
    @Body

i closed the div but it not showing here idk

@code{

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

}

at the @body only text with one div

Update 2.0

it appears the event firing only inside child div inside the main page..what i mean the main scrollbar for that main page will not fire the event..but if you tried to put div with style overflow:scroll then the event will fire only inside the div which have overflow:scroll...if you tried to put overflow scroll in main div it won't work

style="height:1000px;overflow:scroll" it work with this line of code but i have two scrollbar one on the left and the other on the right

Answer 1

You don't need to revert to JS, this simple demo shows the scrolling event working. You need to look at what your CSS classes are up to.

@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++;
    }

}