如何在滚动而不单击它们的情况下跟踪单个页面上不同 div 块的查看计数

Question

我的单页应用程序中有很多卡(div块(。我想跟踪用户滚动浏览此页面时的查看次数。意味着每当滚动时屏幕上或屏幕视口区域中可见的一张卡片时，该特定卡片(div 块(的查看计数就会增加。

<div flex-xs flex-gt-xs="50" layout="column" ng-repeat="card in cards">
  <md-card md-theme="{{ showDarkTheme ? 'dark-grey' : 'default' }}" md-theme-watch>
    <md-card-title>
      <md-card-title-text>
        <span class="md-headline">Card with image</span>
        <span class="md-subhead">Large</span>
      </md-card-title-text>
      <md-card-title-media>
        <div class="md-media-lg card-media"></div>
      </md-card-title-media>
    </md-card-title>
    <md-card-actions layout="row" layout-align="end center">
      <md-button>Action 1</md-button>
      <md-button>Action 2</md-button>
    </md-card-actions>
  </md-card></div>

现在这张卡处于 ng 重复循环中。每当用户向下或向上滚动并且特定时，都会看到一张卡片，我想将下面提到的 html 代码添加到卡片中以跟踪观看次数。

<img ng-src="{{root_url}}/get_image_url?user_id=1&card_id=1" height=1 width=1 style="height: 1px !important; width: 1px !important; display: hide">

这就像Facebook跟踪像素的事情，但我想为我的卡片创建自定义和不同的跟踪像素，以便在div可见时跟踪观看次数。

我正在使用Ruby on Rails和Angularjs。

Answer 1

1.( 这里需要窗口滚动功能，所以创建卡指令来使用 jquery，就像这里的例子一样，除了锚点使用(你需要弄清楚的方式 选择(，

2.( 将指令绑定到它的控制器，并从拉取它们的位置检索查看计数数据，并将该数据传递给指令链接函数，在其中调用滚动函数