在使用jquery

时间:2018-12-06 19:32:20

标签: javascript jquery asp.net-mvc

当滚动大于或等于100时,我试图发出警报。

我正在使用asp.net mvc框架。现在,我有 _Layout.cshtml mobile.cshtml

mobile.cshtml 页面将在 _Layout.cshtml 内部呈现。现在,我在 head tag

上的 mobile.cshtml 页面中写下以下文字
@{
ViewBag.Title = "Mobile";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<head>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<script>
    $(window).on('load', function () {
        alert('windows loaded');    // this alert is working

        if ($(window).scrollTop() + $(window).height() >= 100) {
            alert("Test");   // this alert is also working.bcz window height is greater than 100
        }


        //below all the alerts are not working

        $(window).scroll(function () {
            alert('ddd');
        });

        $(window).on('scroll',function () {
            if ($(window).scrollTop() + $(window).height() >= 100) {
                alert("END!" + $(window).scrollTop());
            }
        });

        $(window).scroll(function () {
            if ($(window).scrollTop() + $(window).height() >= 100) {
                alert("END!" + $(window).scrollTop());
            }
        });

        $(function () {
            var hasBeenTrigged = false;
            $(window).scroll(function () {
                if ($(this).scrollTop() >= 100 && !hasBeenTrigged) { // if scroll is greater/equal then 100 and hasBeenTrigged is set to false.
                    alert("You've scrolled 100 pixels.");
                    hasBeenTrigged = true;
                }
            });
        });
        $(function () {
            $(window).bind("scroll.alert", function () {
                var $this = $(this);
                if ($this.scrollTop() >= 100) {
                    alert("You've scrolled 100 pixels.");
                    $this.unbind("scroll.alert");
                }
            });
        });
    })

</script>    
</head>

此外,控制台上没有错误消息

我检查了这个stack overflow link

的答案

更新

  

我已经从 _Layout.cshtml mobile.cshtml 页面上删除了所有的CSS文件,然后 WORKS

     

当我再次从 _Layout.cshtml 页面添加一个css文件<link href="~/Content/material.css" rel="stylesheet" />时,则它不起作用。

     

请记住,该css文件 Material Design Lite 文件。这就像引导程序。我必须在设计中使用此文件

1 个答案:

答案 0 :(得分:3)

这是 Material Design Lite MDL this Github线程中的一个未解决问题,与scroll事件冲突!

为此{/ {3}}提到了一个建议/技巧,您可以尝试一下,也可以使用here

MDL 已不再维护。内部工作已从Material Components for Web的努力发展到MDL v2。因此,如果可以持续维护和支持,最好尝试转换为该版本。