ScrollReveal 在自定义视口中不起作用答案

【问题标题】：ScrollReveal Not Working in Custom ViewportScrollReveal 在自定义视口中不起作用
【发布时间】：2018-06-02 20:02:24
【问题描述】：

我已经阅读了很多教程，但我很难让 ScrollReveal 正常工作。我有两个主要列，左侧使用滚动条，右侧不滚动。

控制台中没有错误，当我检查我想要显示的 div 元素时，我得到了这个：

<div class="foo" data-sr-id="1" style="; visibility: visible;  -webkit-transform: translateY(0) scale(1); opacity: 1;transform: translateY(0) scale(1); opacity: 1;-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; transition: transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; ">
    text1
</div>

这是头部的内容：

<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script>
    window.sr = ScrollReveal();
</script>
<style>
    /* Ensure elements load hidden before ScrollReveal runs */
    .sr .fooReveal {
        visibility: hidden;
    }
</style>

就在正文结束标记之前，我有这个：

<script>
    // window.sr = ScrollReveal();
    // as a DOM node...
    var fooContainer = document.getElementById('fooContainer');

    sr.reveal('.foo', {
        container: fooContainer
    });
    console.log(fooContainer)

    // as a selector...
    sr.reveal('.bar', {
        container: '#barContainer'
    });
</script>

最后，当我在控制台中输入 ScrollReveal 时，我得到了：

滚动显示 15:10:28.907 ƒ e(n){return"undefined"==typeof this||Object.getPrototypeOf(this)!==e.prototype?new e(n):(O=this,O.version=" 3.3.6",O.tools=new E,O.isSupported()?(O.tools.extend(O.defaults,n||{}),O.defaults.container=…

任何想法我做错了什么？

This is my live site.

【问题讨论】：

如果你想看的话，我有一个不错的 jQuery 显示滚动功能，不需要额外的插件。好吧，我确实使用了 jQuery.fn，但这不是一个额外的插件。适用于所有浏览器并完美设计。还有 greensock 库，但每次都是额外的请求，一旦你看过那里的选择性演示，我就不会那么印象深刻了。还有执照（笑）
当然。值得一试！

标签： javascript html scrollreveal.js

【解决方案1】：

我将解释这个功能步骤：

 jQuery(window).on('load',function() {
  var windowHeight, windowScrollPosTop, windowScrollPosBottom = 0;  // init where we are

  function calcScrollValues() {
    windowHeight = jQuery(window).height();
    windowScrollPosTop = jQuery(window).scrollTop();
    windowScrollPosBottom = windowHeight + windowScrollPosTop;
}
  jQuery.fn.revealOnScroll = function(direction, speed) {
    return this.each(function() {

        var objectOffset = jQuery(this).offset();
        var objectOffsetTop = objectOffset.top;

        if (!jQuery(this).hasClass("hidden")) {

            // if argument is "right"
            if (direction == "right") {
                jQuery(this).css({
                    "opacity"   : 0,
                    "right"     : "700px",
                    "position"  : "relative"
                });
            // if argument is "left"
            } else {
                jQuery(this).css({
                    "opacity"   : 0,
                    "right"     : "-700px",
                    "position"  : "relative"
                });

            }
                jQuery(this).addClass("hidden");    


                        }

        if (!jQuery(this).hasClass("animation-complete")) {

            // if the page has been scrolled far enough to reveal the element
            if (windowScrollPosBottom > objectOffsetTop) {
                jQuery(this).animate({"opacity" : 1, "right" : 0}, speed).addClass("animation-complete");
            } // end if the page has scrolled enough check

        } // end only reveal the element once

    });
}

  function revealCommands() {




    jQuery("h1").revealOnScroll("left", 1500);
      jQuery("li:odd").revealOnScroll("left", 1500);
      jQuery("li:even").revealOnScroll("left", 1500);
      jQuery("s").revealOnScroll("left", 1500);
      jQuery("div").revealOnScroll("right", 900);


}
  calcScrollValues();
revealCommands();

// run the following on every scroll event
jQuery(window).scroll(function() {
    calcScrollValues()
    revealCommands();
 }); // end on scroll

 });

只需确保您已加载 jQuery，然后将上述函数添加到脚本中即可。我现在得走了，不过这个功能是可扩展的，我稍后会更新它。

这是一个演示链接：

https://codepen.io/damianocel/pen/pjdrWr

【讨论】：