Question

我的程序功能就像是下一页/上一页的两部分滚动。什么时候用户滚动到页面顶部，弹出窗口显示，转到上一页。当用户再次滚动时，它会转到上一页。当用户滚动到页面底部时，弹出窗口再次显示滚动以转到下一页;当用户再次滚动时，它会转到下一页，依此类推

Javascript代码

 $(document).ready(function () {


        var countBottom =  0;
        var countTop = 0;

        var linkBeforeFile = "https://bloggertemplate.000webhostapp.com/scroll/";



        var links = ['1.html','2.html','3.html','4.html','5.html','6.html','7.html'];
        var length = links.length;
        var url = window.location.href;
        var reducedUrl = url;
        reducedUrl = reducedUrl.replace(linkBeforeFile, '');
        var index = links.indexOf(reducedUrl);


        function scrollToTop() {
            var previous = index -1;
            var previousUrl = links[previous];
            if(index > 0) {
                $(window).scroll(function () {
                    if ($(window).scrollTop() === 0) {
                        countTop++;
                        if (countTop === 1) {
                            countBottom = 0;
                            $('.messageToShow').text('If you scroll up again during this popup, you will be redirected to previous page');
                            $('.popup').fadeIn();
                            $('.overlay').fadeIn();
                        }
                        if (countTop === 2)
                            window.location.replace(linkBeforeFile + previousUrl);
                    }

                    $('.cancelBtn').click(function () {
                        fadeTopScroll();
                    });

                    if($(window).scrollTop() > 80 && $(window).scrollTop() < 120) {
                        fadeTopScroll();
                    }

                });


            }
        }

        function fadeTopScroll() {
            $('.popup').fadeOut();
            $('.overlay').fadeOut();
            countTop = 0;
        }


        function scrollToBottom() {
            var next = index +1;
            var nextUrl = links[next];

            if(index < length - 1) {
                $(window).scroll(function () {
                    if ($(window).scrollTop() + $(window).height() === $(document).height()) {
                        countBottom++;
                        scrollBottom = true;
                        if (countBottom === 1) {
                            countTop = 0;
                            $('.messageToShow').text('If you scroll down again during this popup, you will be redirected to next page');
                            $('.popup').fadeIn();
                            $('.overlay').fadeIn();
                        }

                        if (countBottom === 2)
                            window.location.replace(linkBeforeFile + nextUrl);
                    }

                    $('.cancelBtn').click(function () {
                        fadeBottomScroll();
                    });

                    if (($(window).scrollTop() + $(window).height() + 80 < $(document).height()) && scrollBottom == true) {
                        fadeBottomScroll();
                    }
                });
            }
        }


        function fadeBottomScroll() {
            $('.popup').fadeOut();
            $('.overlay').fadeOut();
            countBottom = 0;
        }

        scrollToTop();
        scrollToBottom();

    });

Html代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="style.css">
        <script src="jquery-3.2.1.min.js"></script>
        <script src="script.js" type="text/javascript"></script>

    </head>
    <body>

    <!--============================This part Comes in every page==========================-->

    <!--black overlay-->
    <div class="overlay"></div>
    <!--black overlay-->


    <!--Modal-->
    <div class="popup">
        <div class="header">
            <span class="info"><span class="warning">alert</span></span>
        </div>
        <div class="message">
            <p class="messageToShow">
            </p>
        </div>
        <div class="footer">
            <button class="cancelBtn">Cancel</button>
        </div>
    </div>
    <!--Modal-->


    <!--==========================This part Comes in every page==========================-->



    <div style="height: 4px">Scroll down!</div>
    <h1>This is javascript page 1</h1>
    <h1>This is javascript page 1</h1>
    <h1>This is javascript page 1</h1>
    <h1>This is javascript page 1</h1>
    </body>
    </html>

您可以查看here 移动和桌面滚动的功能自己生活

问题： 我面临的问题是它在移动设备上无法正常工作，但在台式机上却很好。我怀疑head标签之间的html文件中的meta标签有问题。我删除了一次，之后滚动功能完全停止在移动设备上工作，特别是在Chrome浏览器中。

JQuery滚动功能在移动设备中无法正常工作？

0 个答案: