如何在单击页面上跟踪不同div块的视图计数而不单击它们

Posted 2021-04-15

我的单页应用程序中有很多卡（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-repeat循环中。每当用户向下或向上滚动并且当时可以看到一张卡片时，我想将下面提到的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。

答案

1.）你需要这里的窗口滚动功能，所以创建卡指令使用jquery像here中的exampled除了锚使用（你需要弄清楚选择的方式），

2.）将指令绑定到它的控制器并从你拉出它们的位置检索viewcount数据，并将该数据传递给指令链接函数，在这里调用scroll函数