Question

首先，我想说我非常喜欢Scrollify，现在我正计划使用它。我的网站的想法是让一些部分具有快照滚动行为，一些部分具有正常滚动。一切都很好，除了我不希望它从快照部分到正常部分进行快照滚动。因为它现在是快照滚动到正常部分，并且在它捕捉后首先滚动到正常滚动。

换句话说，我认为我正在寻找的是能够控制何时启用快照滚动，具体取决于视口中的元素。也许有一个更简单的解决方案。

你有什么建议吗？

Answer 1

(function() {
  var firstSection = $('.wrapper .normal-page').eq(0)[0]
  var firstSectionClassName = $(firstSection).attr('class')
  var base = this;

  $.scrollify({
    section : ".product-page",
    sectionName : "section-name",
    interstitialSection : ".normal-page",
    easing: "easeOutExpo",
    scrollSpeed: 1100,
    offset : 0,
    scrollbars: true,
    standardScrollElements: ".normal-page",
    setHeights: true,
    overflowScroll: true,
    before:function(index, arr) {
      var currentItem = $.scrollify.current().attr('class')

      if (currentItem !== "product-page") {

        $.scrollify.disable();
      }

    },
    after:function() {

      $.scrollify.enable();
    },
    afterResize:function() {

    },
    afterRender:function() {
      console.log("move to the top")
      $.scrollify.instantMove("#" + firstSectionClassName)

    }
  });
})()

HTML

<body>
    <div class="wrapper">
      <div class="normal-page"></div>
      <div class="product-page"></div>
            <div class="normal-page"></div>
        <div class="product-page"></div>
        <div class="normal-page"></div>
    </div>
</body>

所以我已经尝试了启用和禁用方法，但是

Answer 2

您可能需要使用disable和enable方法来实现此目的。

仅在特定部分使用滚动快照，否则使用普通滚动

2 个答案: