时间戳

首页 > 解决方案 > C# Blazor 5.0 onscroll 事件未触发

c# - 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

@代码{

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

}

更新 1.0

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

<div   @onscroll="OnScrollChangeValue" >


  
    <h1>@OnScrollValue</h1>
    @Body
我关闭了 div 但它没有显示在这里 idk

@代码{

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

}

在@body 只有一个 div 的文本

更新 2.0

看来事件仅在主页内的子 div 内触发..我的意思是该主页的主滚动条不会触发该事件..但是如果您尝试将 div 设置为溢出样式：滚动则该事件只会触发在具有溢出的 div 内：滚动...如果您尝试将溢出滚动放在主 div 中，它将不起作用

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

标签： c#asp.netblazor

解决方案

你不需要恢复到 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++;
    }

}

推荐阅读