Question

我正在尝试在JS中实现模块模式，但滚动事件未触发，示例中的代码出了什么问题

var modBrandHeader = (function ($) {
    'use strict';
  
    var $con;
  
    /* GENERIC */
    var init = function () {
      $con = $('.brand-header');
      if (!$con.length) {
        return;
      }
    };

    var scroll = function (scrollTop) {
      if (scrollTop > $('.brand-header').height()) {
          console.log("Scroll");
      } else {
        console.log("Scroll removed");
      }
    };

    return {
      init: init,
      scroll: scroll
    };
  })(jQuery);

.brand-header {
  height:70px;
  width:100%;
  float:left;
  background-color:#ddd;
  border-bottom:1px solid #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="brand-header">This is header</div>

Answer 1

这里有些错误（或者至少是不理想的）。首先，您没有将任何事件与滚动事件联系在一起。看来您相信您的FlowLayoutPanel函数将在该事件触发时被调用，但不会。您需要添加以下内容：

scroll

您可以将其放置在所需的位置（无论如何定义了滚动功能之后），但通常并建议将其放置在$(document).on("scroll", scroll);块中的init函数中。

接下来，什么都没有实际调用您的$(document).ready函数，尽管也许是通过此处未显示的代码来调用的。您将需要以一种或另一种方式进行调用。它不会自动发生。

最后，您的init函数具有无意义的if / return块；如果没有init，您会返回，但还是这样做，因为那里没有更多功能。

最后一个提示：滚动事件通常不受浏览器的速率限制。（或者至少不会达到您可能期望的程度。）此事件将触发一个 lot ，并且您可能想为自己称为“事件”的任何事件添加自己的速率限制结果。如果您不这样做，性能可能会下降，尤其是在较长的页面上。

模块模式JavaScript-滚动事件不起作用

1 个答案: