1

我在我的网站上使用https://projects.lukehaas.me/scrollify/并且在打开模式后无法禁用它的滚动功能。我正在使用标准的 onclick 操作来打开模式，因此我可以在其中注入一些东西，但我不确定是什么。

这是我的 Scrollify 初始化：

jQuery.scrollify({
section : ".vc_section",
sectionName : "section-name",
interstitialSection : "",
easing: "easeOutExpo",
scrollSpeed: 2000,
offset : 0,
scrollbars: true,
standardScrollElements: "footer",
setHeights: true,
overflowScroll: true,
updateHash: false,
touchScroll: true,
before:function(i,panels) {
var ref = panels[i].attr("data-section-name");
if(ref === "first") {
   jQuery("#hero-container").removeClass("hidden");
}

if(ref === "second") {
jQuery("#hero-container").addClass("hidden");
}
},
after:function() {},
afterResize:function() {},
afterRender:function() {}
});

然后我通过一个简单的 onclick 函数调用模态：

    jQuery('.schedule-visit-toggle, .schedule-visit-toggle a').on('click touchstart', function(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    jQuery('#schedule-visit-modal').foundation('open');
});
4

3 回答 3

3

打开模式时调用$.scrollify.disable()以禁用 Scrollify。

于 2017-03-03T10:12:20.530 回答
0

无论如何，我会尝试试一试..

我猜当模态未显示时它display: none;在其css中。

所以你可以做的是：

if ($('#yourModalID').css('display') === 'none') {
  scrollify
} else {
    do not scrollify
});

也许它不起作用，但值得一试..

于 2017-03-02T20:05:03.583 回答
0

我将此代码添加到 afterRender:function() {}

$(".mobile-menu-toggle").on("click",function() {
      $("body").toggleClass("layout-open");
       if($("body").hasClass('layout-open')){
          $.scrollify.disable();
       }else{
           $.scrollify.enable();
        }
});

并添加样式 css

 .layout-open{
    touch-action: none;
}

它运行良好

于 2021-04-22T10:41:02.437 回答