javascript - Bootstrap 模式无法使用 fullPage.js 函数 `scroll`

Question

我正在使用 fullPage.js 和 Bootstrap 模态。

我在 Bootstrap 模式中滚动内容时遇到问题。

我无法在 Bootstrap 模式制作的弹出窗口中滚动。或者与 Bootstrap 模态制作的 UI 交互。当我添加函数来销毁 fullPage.js 时，它仍然无法滚动其中的内容。通常，我的代码可以正常工作，但使用 fullPage.js 时，它似乎无法正常工作。

你可以在 http://jsfiddle.net/6SQhb/496/ 看到我的代码

或者直接在我的代码中:

var slideTimeout;

$('#fullpage').fullpage({
    sectionsColor: ['#ccc', '#999'],
    anchors: ['home', 'about'],
    animateAnchor: false,
    menu: '.nav',
    paddingTop: '50px',
    verticalCentered: false,
    slidesNavigation: true,
    slidesNavPosition: 'bottom',
    css3: true,
    afterRender: function () {
        //on page load, start the slideshow
        setTimeout(function () {
            $.fn.fullpage.moveTo(1, 0);
        }, 1000);
    },
    afterSlideLoad: function (anchorLink, index, slideAnchor, slideIndex) {
        if (anchorLink == 'home') {
            //make the slideshow automatically go!
            slideTimeout = setTimeout(function () {
                $.fn.fullpage.moveTo(1, slideIndex + 1);
            }, 1000);

            //if you are at the last slide
            //then cycle back to the first
            if (slideIndex == 2) {
                slideTimeout = setTimeout(function () {
                    $.fn.fullpage.moveTo(1, 0);
                }, 1000);
            }
        }
    },

    onLeave: function (index, direction) {
        //after leaving section 1 (home) and going anywhere else, whether scrolling down to next section or clicking a nav link, this SHOULD stop the slideshow and allow you to navigate the site...but it does not
        if (index == '1') {
            console.log('on leaving the slideshow/section1');
            clearInterval(slideTimeout);
        }
    }
});

//$(document).on('click', '.clickme', function(){
  //$.fn.fullpage.destroy('all');
//});

.modal-backdrop {
    background-color: transparent !important;
}

.modal-dialog{
    overflow-y: initial !important;
}
.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
.slideOne {
    background-color:#99CCFF;
}
.slideTwo {
    background-color:#FF66FF;
}
.slideThree {
    background-color:#00CC99;
}
#header {
    width: 100%;
    background-color: #42403c;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    height: 50px;
    top: 0;
    z-index: 99;
}
.nav li {
    display:inline;
}
.nav li a {
    color: #FFF;
    font-size: 16px;
    text-decoration: none;
}
.nav li a:hover {
    color: #69b744;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>
<link href="http://alvarotrigo.com/fullPage/jquery.fullPage.css" rel="stylesheet"/>


<header id="header">
    <ul class="nav">
        <li data-menuanchor="home"> <a href="#home">home</a>

        </li>
        <li data-menuanchor="about"><a href="#about">about</a>

        </li>
    </ul>
</header>
<div id="fullpage">
    <div class="section" id="section0">
    <br><br><br><br><br>
      <a class="clickme" href="javascript:void(0,0)" data-toggle="modal" data-target="#myModal">Click me </a>
      <!-- Modal -->
      <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi magnam voluptatibus quaerat, mollitia suscipit. Quia asperiores itaque temporibus voluptate similique deleniti at voluptates alias, et laudantium? Unde, neque vitae nesciunt!</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi magnam voluptatibus quaerat, mollitia suscipit. Quia asperiores itaque temporibus voluptate similique deleniti at voluptates alias, et laudantium? Unde, neque vitae nesciunt!</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi magnam voluptatibus quaerat, mollitia suscipit. Quia asperiores itaque temporibus voluptate similique deleniti at voluptates alias, et laudantium? Unde, neque vitae nesciunt!</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi magnam voluptatibus quaerat, mollitia suscipit. Quia asperiores itaque temporibus voluptate similique deleniti at voluptates alias, et laudantium? Unde, neque vitae nesciunt!</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi magnam voluptatibus quaerat, mollitia suscipit. Quia asperiores itaque temporibus voluptate similique deleniti at voluptates alias, et laudantium? Unde, neque vitae nesciunt!</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
      <!-- end modal -->
    </div>
    <div class="section" id="section1">second section</div>
</div>

Answer 1

这是解决方案的链接。只需将模式放在整页 js 之外:

[http://jsfiddle.net/65kv42L3/][1]

此外，您可以在模式滚动时禁用整页:Block scroll on Modal open

代码在这里:

<header id="header">
<ul class="nav">
    <li data-menuanchor="home"> <a href="#home">home</a>

    </li>
    <li data-menuanchor="about"><a href="#about">about</a>

    </li>
</ul>
</header>
<div id="fullpage">
<div class="section" id="section0">
<br><br><br><br><br>
  <a class="clickme" href="javascript:void(0,0)" data-toggle="modal" data-target="#myModal">Click me </a>
  <!-- Modal -->

</div>
<div class="section" id="section1">second section</div>


</div>

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi magnam voluptatibus quaerat, mollitia suscipit. Quia asperiores itaque temporibus voluptate similique deleniti at voluptates alias, et laudantium? Unde, neque vitae nesciunt!</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi magnam voluptatibus quaerat, mollitia suscipit. Quia asperiores itaque temporibus voluptate similique deleniti at voluptates alias, et laudantium? Unde, neque vitae nesciunt!</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi magnam voluptatibus quaerat, mollitia suscipit. Quia asperiores itaque temporibus voluptate similique deleniti at voluptates alias, et laudantium? Unde, neque vitae nesciunt!</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi magnam voluptatibus quaerat, mollitia suscipit. Quia asperiores itaque temporibus voluptate similique deleniti at voluptates alias, et laudantium? Unde, neque vitae nesciunt!</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi magnam voluptatibus quaerat, mollitia suscipit. Quia asperiores itaque temporibus voluptate similique deleniti at voluptates alias, et laudantium? Unde, neque vitae nesciunt!</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  <!-- end modal -->