fullpage.js 和 materialize.js；使用 materialize sidenav 禁用鼠标滚动

Question

我很难让 materialze.js 和 fullpage.js 一起工作。这是一个 jsfiddle 来演示问题。 Fullpage.js 设置为以 640px 的响应模式跳转。在正常模式下（641px 及以上）一切都按预期工作。在响应模式下一切正常，只要不使用 Slideout-Menu (materialize.js)。使用 Slideout-Menu 后，鼠标滚动完全停止。虽然键盘滚动工作正常。

见jsfiddle.net

实现标记

<nav id="nav">
  <ul id="sidenav" class="side-nav">
    <li data-menuanchor="a"><a href="#a">a</a></li>
    <li data-menuanchor="b"><a href="#b">b</a></li>
    <li data-menuanchor="c"><a href="#c">c</a></li>
    <li data-menuanchor="d"><a href="#d">d</a></li>
    <li data-menuanchor="e"><a href="#e">e</a></li>
  </ul>
  <ul id="quick-links" class="right">
    <li data-menuanchor="b"><a href="#b">b</a></li>
    <li data-menuanchor="c"><a href="#c">c</a></li>
  </ul>
  <ul>
    <li><a id="sidenav-toggle" data-activates="sidenav" href="#!">menu</a></li>
  </ul>
</nav>

整页标记

<div id="fullpage">
  <div id="sa" class="section">a</div>
  <div id="sb" class="section">b</div>
  <div id="sc" class="section">c</div>
  <div id="sd" class="section">d</div>
  <div id="se" class="section">e</div>
</div>

物化js

$("#sidenav-toggle").sideNav({
    closeOnClick: true
});

整页 js

$('#fullpage').fullpage({
    menu: '#nav',
    anchors: ['a', 'b', 'c', 'd', 'e'],
    normalScrollElements: '#nav',
    paddingTop: 0,
    paddingBottom: 0,
    responsiveWidth: 640
});

Answer 1

通过 fullpage.js 在响应模式下实现菜单 is somehow removing the overflow: visible; property applied to the body element。

关闭菜单时重新添加即可：

$(document).on('click', '.drag-target', function(e) {
     //in responsive mode?
     if($('.fp-responsive').length){
         $('body').css('overflow', 'visible');
     }

});

Reproduction online

fullpage.js 和 materialize.js；使用 materialize sidenav 禁用鼠标滚动

fullpage.js and materialize.js; using the materialize sidenav disable mouse scrolling

javascript

materialize

fullpage.js