Question

我有一个包含4个fullpagejs部分的网页。我想在第3部分中使用multiscrolljs。但是，一旦我调用$('#multiscroll').multiscroll();，第一个fullpagejs部分就会出现multiscroll部分，它无法正常工作。

有没有办法使MultiScrollJs仅在第3部分内工作？

我尝试更改normalScrollElements，fitToSection，scrollOverflow，还尝试获取fullpagejs当前部分的索引，但没有一个起作用。

我对此表示感谢。谢谢

<html>
<head>
    <!-- Favicon -->
    <link rel="shortcut icon" href="./favicon.ico" />
    <!-- Title -->
    <title>Title</title>

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet">

    <!-- Multiscroll -->
    <link rel="stylesheet" type="text/css" href="./css/jquery-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="./css/jquery.multiscroll.min.js" />

    <!-- Stylesheets -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.2/fullpage.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>

<body>
    <!-- Navigation -->
    <div class="container navbar navbar-inverse navbar-fixed-top">
        <a class="navbar-brand" href="#">
            <img class="site-logo" src="./img/site_logo.png" width="280px">
        </a>
        <ul class="nav navbar-nav navbar-right navmenuitems">
            <li>
                <a href="#home">Home</a>
            </li>
            <li>
                <a href="#services">Services</a>
            </li>
            <li>
                <a href="#about">About Us</a>
            </li>
            <li>
                <a href="#contact">Contact Us</a>
            </li>
        </ul>
    </div>

    <!-- Fullpage -->
    <div id="fullpage">
        <!-- HomeSection -->
        <div id="section0" class="section" style="background-color: rgb(255, 255, 255)">
            <div class="container">
                <div class="row">
                    <div class="col-md-5">
                        <!-- <img class="site-logo" src="./img/site_logo.png" width="280px"> -->
                    </div>
                </div>
            </div>
        </div>
        <!-- Services -->
        <div id="testdiv" class="section" style="background-color: rgb(255, 65, 65)">
            <div id="multiscroll">
                <div class="ms-left">
                    <div class="ms-section" style="background-color: rgb(0, 0, 0)">Section 1 left</div>
                    <div class="ms-section" style="background-color: rgb(255, 255, 255)">Section 2 left</div>
                    <div class="ms-section" style="background-color: rgb(0, 0, 0)">Section 3 left</div>
                </div>
                <div class="ms-right" style="background-color: rgb(255, 255, 255)">
                    <div class="ms-section" style="background-color: rgb(255, 255, 255)">Section 1 right</div>
                    <div class="ms-section" style="background-color: rgb(0, 0, 0)">Section 2 right</div>
                    <div class="ms-section" style="background-color: rgb(255, 255, 255)">Section 3 right</div>
                </div>
            </div>
        </div>
        <div class="section" style="background-color: rgb(255, 174, 0)">
        </div>
        <div class="section" style="background-color: rgb(30, 255, 0)">Some section</div>
    </div>

    <!-- JS Loads -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="./js/jquery-ui.min.js"></script>
    <script src="./js/scrolloverflow.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.2/fullpage.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="./js/script.js"></script>
    <script src="./js/jquery.multiscroll.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#fullpage').fullpage({
                verticalCentered: false,
                autoScrolling: true,
                scrollOverflow: false,
                onLeave: function (index, nextIndex, direction) {
                    if (index == 10) {
                        $('#fp-nav').show();
                        $header_top.removeClass('open-menu');

                    }
                }
            });

            $('#multiscroll').multiscroll({
                navigation: false,
                normalScrollElements: '#section0',
                fitToSection: true,
                afterLoad: function (anchorLink, index) {
                    if (index == 3) {

                    }
                }
            });
        });
    </script>
</body>

</html>

滚动的整页js部分中的multiscroll js无法正常工作

0 个答案: