查找用户在屏幕上看到的产品

Question

我有一个产品清单。在产品列表中，滚动显示3个产品。如何访问用户当时看到的3个产品？产品具有类名产品。

<div class="product">
<span>price:2</span>
</div>

<div class="product">
<span>price:2</span>
</div>

Answer 1

这就是您可以找到出现在用户屏幕上的项目的方式。

这就是我解决的方式。

<div class="product" itemData='{"itemId":"SK-GKHNGNS1"}'>
  <span>price:2</span>
 </div>
    
  <div class="product" itemData='{"itemId":"SK-TRK"}'>
    <span>price:2</span>
  </div>

$(document).ready(function(){
                let oldScroll = 300;
                findItems();
    
                $(window).scroll(function() {
                    if (oldScroll < (parseInt(window.pageYOffset) - 200) || oldScroll > (parseInt(window.pageYOffset) + 200)) {
                        console.log(oldScroll);
                        oldScroll = window.pageYOffset;
                        findItems();
                    }
                });
            });
           
    
          function findItems() {
              var i = 0;
              var visibleProducts = [];
              $(". product").each(function (index) {
    
                  if ($(this).hasClass('pushItem')) {
                      return true;
                  }
    
                  var start = window.pageYOffset;
                  var end = window.pageYOffset + window.innerHeight;
    
                  var productPositionStart = $(this).position().top;
                  var productPositionEnd = productPositionStart + (($(this).height() / 3) * 2);
    
                  if (start <= productPositionStart && end >= productPositionEnd) {
                      $(this).addClass('pushItem')
                      visibleProducts.push($.parseJSON($(this).find('a').attr('itemData')));
                      i++;
                  }
              });
    
              if (visibleProducts.length > 0) {
                 console.log(visibleProducts);
              }
          }