Question

我正在尝试同时使用scrollReveal.js和onepage-scroll.js

当浏览器显示元素时，

scrollReveal会被设置为动画元素。 onepage-scroll有助于“伪造”单页网站。

看起来它们之间存在冲突：scrollReveal在上加载，但当我“向下滚动”到另一个“页面”（onepage-scroll的角色）时根本不起作用

这是一个片段：

/* scrollReveal implementation */
var srConf = {
    opacity: 1,
    reset: true,
    delay: "always"
};
var sr = window.sr = new scrollReveal(srConf);


/* onepage-scroll implementation */
$("#onepage-scroll").onepage_scroll({
    animationTime: 800,
    pagination: false, // I use a custom-made nav
    loop: false,
    beforeMove: function(index) {
      /* makes nav working */
        $("#desktop-navbar li.link.on").removeClass("on");
        $("#mobile-navbar li.link.on").removeClass("on");
        $("#desktop-navbar li.link").eq(index-1).addClass("on");
        $("#mobile-navbar li.link").eq(index-1).addClass("on");
    },
    afterMove: function(index) {
      // this is a try - not working
      $(document).trigger("scroll");
    }
});


$(document).on("click", ".navbar li.link", function() {
  /* programmatically "scroll" to another page */
    $("#onepage-scroll").moveTo($(this).index()+1);
});

body #desktop-navbar-container {
  position: absolute;
  top: 20px;
  width: 100%;
  text-align: center;
  z-index: 900;
  font-size: 1.5em;
}
body #desktop-navbar-container ul {
  margin: 0;
  padding: 0;
  width: inherit;
}
body #desktop-navbar-container ul li.link {
  list-style: none;
  display: inline-block;
  margin: 0 15px;
  cursor: pointer;
}
body #desktop-navbar-container ul li.link:hover,
body #desktop-navbar-container ul li.link.on {
  text-decoration: underline;
}
body #desktop-navbar-container ul li.link i.fa {
  font-size: 1.5em;
  display: inline-block;
  margin-right: 10px;
}

<link href="http://www.pskowron.info/css/onepage-scroll.css" rel="stylesheet"/>


<div class="content">
  <div id="desktop-navbar-container" class="hidden-xs hidden-sm">
    <ul id="desktop-navbar" class="navbar">
      <li class="link on">Page 1</li>
      <li class="link">Page 2</li>
    </ul>
  </div>
</div>

<div id="onepage-scroll">
  <section id="page1">
    <div style="width: 200px; height: 200px; background-color: blue;" data-sr="enter top over 0.9s"></div>
    <div style="width: 350px; height: 80px; background-color: red;" data-sr="enter left over 0.4s wait 1s"></div>
  </section>
  
  <section id="page2">
    <div style="width: 200px; height: 200px; background-color: blue;" data-sr="enter top over 0.9s"></div>
    <div style="width: 350px; height: 80px; background-color: red;" data-sr="enter bottom over 0.4s wait 1s"></div>
  </section>
</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.pskowron.info/js/jquery.onepage-scroll.js"></script>
<script src="http://www.pskowron.info/js/scrollReveal.js"></script>

Answer 1

原因在于，单页滚动并不真正滚动网站，而是更改了插件容器的translate3d属性。

如果你需要fullpage.js using the option scrollBar:true，你可以使用scrollReveal，它会强制插件显示滚动条，因此可以使用浏览器提供的实际滚动功能。

在任何情况下，您都不需要使用scrollReveal，因为您始终可以使用插件提供的回调，例如afterLoad或afterSlideLoad。

同时使用onepage-scroll.js和scrollReveal.js

1 个答案: