javascript - 仅在特定部分使用 scroll-snap,否则使用正常滚动

标签 javascript css scroll jquery-scrollify

首先我想说我非常喜欢Scrollify并且我现在正打算使用它。我的网站的想法是让一些部分具有快速滚动行为,而一些部分具有正常滚动行为。一切正常,除了我不希望它在从快照部分转到普通部分时进行快照滚动。就像现在一样,它快速滚动到正常部分,并且首先在它快速滚动后进入正常滚动。

换句话说,我认为我正在寻找的是能够根据视口(viewport)中的元素来控制何时启用快速滚动。不过,也许有更简单的解决方案。

你有什么建议吗?

最佳答案

(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>

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

关于javascript - 仅在特定部分使用 scroll-snap,否则使用正常滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40140204/

相关文章:

javascript - 滚动条移动时 jQuery.scrollTop() 不更新

javascript - 如何区分鼠标滚动和通过在 javascript/jQuery 中拖动窗口的滚动来完成滚动

javascript - 在 HTML 中使用 Jquery 进行 Ajax 调用并响应其他 Html 页面

javascript - 解析/转换 cookie 为 JSON 格式

css - slider 高度 CSS 不起作用

html - 如何在主 div block 中居中文本

c# - aspx页面VS2012的javascript函数中未命中断点

javascript - Vue.js 引用未定义,即使 this.$refs 显示它们在那里

css - 编辑 CSS 并将更改返回 SASS 的最佳方法

滚动div高度后CSS粘性标题消失